/* ================================================================
   gerobw — IDE-inspired theme
   Light: warm cream/sepia   |   Dark: barely-warm obsidian (VSCode-style)
   Color coding: titles=blue · domain=green · path=teal
                 engines=muted mono · snippets=warm · dates=mono
   ================================================================ */

/* ── Fonts ───────────────────────────────────────────────────── */
:root {
  --g-ui:   -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --g-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', ui-monospace, monospace;
}

/* ================================================================
   LIGHT MODE — warm cream / sepia
   ================================================================ */
:root,
html.theme-auto,
html.theme-light {
  /* ── surfaces ── */
  --color-base-background:          #FAF6EE;
  --color-base-background-mobile:   #FAF6EE;
  --color-header-background:        #F3EDE0;
  --color-header-border:            #DDD3BF;
  --color-footer-background:        #F3EDE0;
  --color-footer-border:            #DDD3BF;
  --color-sidebar-background:       #F3EDE0;
  --color-sidebar-border:           #DDD3BF;
  --color-sidebar-font:             #1C1917;
  --color-result-background:        #FDFAF4;
  --color-result-border:            #E8DFD0;
  --color-backtotop-background:     #F3EDE0;
  --color-backtotop-border:         #DDD3BF;
  --color-backtotop-font:           #6B5A48;
  --color-answer-background:        #F3EDE0;
  --color-answer-font:              #1C1917;
  --color-result-vim-selected:      #EDE5D8;
  --color-result-vim-arrow:         #BF5A1A;
  --color-result-search-url-border: #DDD3BF;
  --color-result-search-url-font:   #1C1917;
  --color-result-keyvalue-col-table:#F3EDE0;
  --color-result-keyvalue-odd:      #F3EDE0;
  --color-result-keyvalue-even:     #FDFAF4;
  --color-result-detail-background: #2A231C;
  --color-result-detail-font:       #EAE4D8;
  --color-result-detail-link:       #6EC49A;
  --color-result-detail-hr:         #4A4238;
  --color-result-detail-label-font: #B0A898;
  --color-result-image-background:  #FDFAF4;
  --color-result-image-span-font:   #6B5A48;
  --color-result-image-span-font-selected: #FFF8F0;
  --color-settings-tr-hover:        #EDE5D8;
  --color-settings-table-group-background: rgba(0,0,0,0.03);
  --color-settings-engine-description-font: #6B5A48;

  /* ── text ── */
  --color-base-font:                #2A231C;
  --color-base-font-rgb:            42, 35, 28;

  /* ── interactive / accent ── */
  --color-btn-background:           #BF5A1A;
  --color-btn-font:                 #FFF8F0;
  --color-show-btn-background:      #C8BCAA;
  --color-show-btn-font:            #1C1917;
  --color-search-background:        #FFFFFF;
  --color-search-border:            #D8CFC0;
  --color-search-shadow:            0 2px 12px rgba(60,40,20,0.10);
  --color-search-font:              #1C1917;
  --color-search-background-hover:  #BF5A1A;
  --color-categories-item-selected-font:   #BF5A1A;
  --color-categories-item-border-selected: #BF5A1A;
  --color-autocomplete-background:         #FFFFFF;
  --color-autocomplete-border:             #D8CFC0;
  --color-autocomplete-shadow:             0 4px 16px rgba(60,40,20,0.13);
  --color-autocomplete-background-hover:   #F0E8D8;
  --color-autocomplete-font:               #1C1917;
  --color-error:                    #C0392B;
  --color-error-background:         #FAEAE8;
  --color-warning:                  #A0780A;
  --color-warning-background:       #FAF5E0;
  --color-success:                  #2D7A3A;
  --color-success-background:       #E8F5E9;

  /* ── URL / link colors ── */
  --color-url-font:                 #1A5C3A;
  --color-url-visited-font:         #7A4A8A;
  --color-result-url-font:          #1A5C3A;
  --color-result-link-font:         #1C3A5C;
  --color-result-link-font-highlight: #BF5A1A;
  --color-result-link-visited-font:   #7A4A8A;
  --color-result-publishdate-font:    #8B7355;
  --color-result-engines-font:        #A89A8A;
  --color-result-description-highlight-font: #1C1917;

  /* ── toolkit ── */
  --color-toolkit-badge-background: #EDE5D8;
  --color-toolkit-badge-font:       #8B7355;
  --color-toolkit-kbd-background:   #1C1917;
  --color-toolkit-kbd-font:         #FAF6EE;
  --color-toolkit-dialog-background:#FAF6EE;
  --color-toolkit-dialog-border:    #DDD3BF;
  --color-toolkit-tabs-label-border:#FAF6EE;
  --color-toolkit-tabs-section-border: #DDD3BF;
  --color-toolkit-select-background:#EDE5D8;
  --color-toolkit-select-border:    #D8CFC0;
  --color-toolkit-select-background-hover: #DDD3C8;
  --color-toolkit-input-text-font:  #1C1917;
  --color-toolkit-checkbox-onoff-off-background: #DDD3BF;
  --color-toolkit-checkbox-onoff-on-background:  #DDD3BF;
  --color-toolkit-checkbox-onoff-on-mark-background:  #BF5A1A;
  --color-toolkit-checkbox-onoff-on-mark-color:       #FFF8F0;
  --color-toolkit-checkbox-onoff-off-mark-background: #A89A8A;
  --color-toolkit-checkbox-onoff-off-mark-color:      #FFF8F0;
  --color-toolkit-checkbox-label-background: #DDD3BF;
  --color-toolkit-checkbox-label-border:     #DDD3BF;
  --color-toolkit-checkbox-input-border:     #BF5A1A;
  --color-toolkit-engine-tooltip-background: #FAF6EE;
  --color-toolkit-engine-tooltip-border:     #DDD3BF;
  --color-toolkit-loader-border:    rgba(0,0,0,0.12);
  --color-toolkit-loader-borderleft: transparent;
  --color-doc-code:                 #003366;
  --color-doc-code-background:      #E8F0FF;
  --color-bar-chart-primary:        #BF5A1A;
  --color-bar-chart-secondary:      #4A7C6F;
  --color-image-resolution-background: rgba(0,0,0,0.5);
  --color-image-resolution-font:    #FFF;
  --color-loading-indicator:        rgba(0,0,0,0.10);
  --color-loading-indicator-gap:    #FAF6EE;
  --color-line-number:              #8B7355;
  --color-favicon-background-color: #E8DFD0;
  --color-favicon-border-color:     #D8CFC0;

  /* ── IDE semantic vars ── */
  --g-accent:      #BF5A1A;
  --g-url-domain:  #1A6E42;  /* green  — type/class */
  --g-url-path:    #1A7888;  /* teal   — module path, clearly ≠ green */
  --g-title:       #1A3E72;  /* deep blue — function/keyword */
  --g-snippet:     #4A4038;  /* warm dark — string content, slightly lighter than base */
  --g-date:        #8B7355;  /* amber-gray — comment */
  --g-engines:     #B0A08E;  /* faded amber — inactive comment */
  --g-border:      #DDD3BF;
  --g-surface:     #F3EDE0;
  --g-focus-ring:  rgba(191,90,26,0.18);
}

/* ================================================================
   DARK MODE — neutral obsidian
   Applied to both explicit .theme-dark AND auto-dark (OS dark)
   ================================================================ */
html.theme-dark,
html.theme-dark * {
  color-scheme: dark;
}

html.theme-dark {
  /* ── surfaces — VSCode-style: barely warm, not sepia ── */
  --color-base-background:          #141312;
  --color-base-background-mobile:   #141312;
  --color-header-background:        #1C1B1A;
  --color-header-border:            #282624;
  --color-footer-background:        #1C1B1A;
  --color-footer-border:            #282624;
  --color-sidebar-background:       #1F1E1D;
  --color-sidebar-border:           #282624;
  --color-sidebar-font:             #E6E4E1;
  --color-result-background:        #181716;
  --color-result-border:            #282624;
  --color-backtotop-background:     #1F1E1D;
  --color-backtotop-border:         #282624;
  --color-backtotop-font:           #8A8784;
  --color-answer-background:        #1F1E1D;
  --color-answer-font:              #E6E4E1;
  --color-result-vim-selected:      rgba(50,48,46,0.80);
  --color-result-vim-arrow:         #5B8AFF;
  --color-result-search-url-border: #282624;
  --color-result-search-url-font:   #E6E4E1;
  --color-result-keyvalue-col-table:#1C1B1A;
  --color-result-keyvalue-odd:      #1C1B1A;
  --color-result-keyvalue-even:     #1F1E1D;
  --color-result-detail-background: #0F0E0D;
  --color-result-detail-font:       #E6E4E1;
  --color-result-detail-link:       #57B98A;
  --color-result-detail-hr:         #282624;
  --color-result-detail-label-font: #888582;
  --color-result-image-background:  #1F1E1D;
  --color-result-image-span-font:   #8A8784;
  --color-result-image-span-font-selected: #141312;
  --color-settings-tr-hover:        #242322;
  --color-settings-table-group-background: rgba(255,255,255,0.03);
  --color-settings-engine-description-font: #8A8784;

  /* ── text ── */
  --color-base-font:                #E6E4E1;
  --color-base-font-rgb:            230, 228, 225;

  /* ── interactive ── */
  --color-btn-background:           #4F7EF5;
  --color-btn-font:                 #F5F4F2;
  --color-show-btn-background:      #2C2B2A;
  --color-show-btn-font:            #E6E4E1;
  --color-search-background:        #222120;
  --color-search-border:            #353230;
  --color-search-shadow:            0 2px 12px rgba(0,0,0,0.40);
  --color-search-font:              #E6E4E1;
  --color-search-background-hover:  #4F7EF5;
  --color-categories-item-selected-font:   #5B8AFF;
  --color-categories-item-border-selected: #5B8AFF;
  --color-autocomplete-background:         #222120;
  --color-autocomplete-border:             #353230;
  --color-autocomplete-shadow:             0 4px 16px rgba(0,0,0,0.48);
  --color-autocomplete-background-hover:   #282624;
  --color-autocomplete-font:               #E6E4E1;
  --color-error:                    #E06060;
  --color-error-background:         #2A1010;
  --color-warning:                  #D4A830;
  --color-warning-background:       #2A2208;
  --color-success:                  #5DB87A;
  --color-success-background:       #0A2212;

  /* ── URL / link colors ── */
  --color-url-font:                 #57B98A;
  --color-url-visited-font:         #B090D4;
  --color-result-url-font:          #57B98A;
  --color-result-link-font:         #7AB8E8;
  --color-result-link-font-highlight: #5B8AFF;
  --color-result-link-visited-font:   #B090D4;
  --color-result-publishdate-font:    #888582;
  --color-result-engines-font:        #888582;
  --color-result-description-highlight-font: #E6E4E1;

  /* ── toolkit ── */
  --color-toolkit-badge-background: #282624;
  --color-toolkit-badge-font:       #8A8784;
  --color-toolkit-kbd-background:   #E6E4E1;
  --color-toolkit-kbd-font:         #141312;
  --color-toolkit-dialog-background:#1C1B1A;
  --color-toolkit-dialog-border:    #282624;
  --color-toolkit-tabs-label-border:#141312;
  --color-toolkit-tabs-section-border: #282624;
  --color-toolkit-select-background:#222120;
  --color-toolkit-select-border:    #353230;
  --color-toolkit-select-background-hover: #282624;
  --color-toolkit-input-text-font:  #E6E4E1;
  --color-toolkit-checkbox-onoff-off-background: #222120;
  --color-toolkit-checkbox-onoff-on-background:  #222120;
  --color-toolkit-checkbox-onoff-on-mark-background:  #5B8AFF;
  --color-toolkit-checkbox-onoff-on-mark-color:       #141312;
  --color-toolkit-checkbox-onoff-off-mark-background: #5C5A58;
  --color-toolkit-checkbox-onoff-off-mark-color:      #141312;
  --color-toolkit-checkbox-label-background: #222120;
  --color-toolkit-checkbox-label-border:     #282624;
  --color-toolkit-checkbox-input-border:     #5B8AFF;
  --color-toolkit-engine-tooltip-background: #1C1B1A;
  --color-toolkit-engine-tooltip-border:     #282624;
  --color-toolkit-loader-border:    rgba(255,255,255,0.10);
  --color-toolkit-loader-borderleft: transparent;
  --color-doc-code:                 #D0CEC8;
  --color-doc-code-background:      #1E2438;
  --color-bar-chart-primary:        #5B8AFF;
  --color-bar-chart-secondary:      #52908C;
  --color-image-resolution-background: rgba(0,0,0,0.65);
  --color-image-resolution-font:    #FFF;
  --color-loading-indicator:        rgba(255,255,255,0.08);
  --color-loading-indicator-gap:    #141312;
  --color-line-number:              #888582;
  --color-favicon-background-color: #282624;
  --color-favicon-border-color:     #353230;

  /* ── IDE semantic vars ── */
  --g-accent:      #5B8AFF;
  --g-url-domain:  #56C490;  /* green  — type/class */
  --g-url-path:    #38C0CE;  /* cyan   — module path, clearly ≠ green */
  --g-title:       #79B8FF;  /* bright periwinkle — function/keyword */
  --g-snippet:     #B8B4AE;  /* muted warm-gray — string content */
  --g-date:        #888582;  /* comment gray */
  --g-engines:     #5E5C5A;  /* dimmer — inactive comment */
  --g-border:      #282624;
  --g-surface:     #1F1E1D;
  --g-focus-ring:  rgba(91,138,255,0.20);
}

/* ── Auto theme: dark when OS is dark ────────────────────────── */
/* Must use :root.theme-auto to match original SearXNG specificity (0-2-0) */
@media (prefers-color-scheme: dark) {
  :root.theme-auto {
    --color-base-background:          #141312;
    --color-base-background-mobile:   #141312;
    --color-header-background:        #1C1B1A;
    --color-header-border:            #282624;
    --color-footer-background:        #1C1B1A;
    --color-footer-border:            #282624;
    --color-sidebar-background:       #1F1E1D;
    --color-sidebar-border:           #282624;
    --color-sidebar-font:             #E6E4E1;
    --color-result-background:        #181716;
    --color-result-border:            #282624;
    --color-backtotop-background:     #1F1E1D;
    --color-backtotop-border:         #282624;
    --color-backtotop-font:           #8A8784;
    --color-answer-background:        #1F1E1D;
    --color-answer-font:              #E6E4E1;
    --color-result-vim-selected:      rgba(50,48,46,0.80);
    --color-result-vim-arrow:         #5B8AFF;
    --color-result-search-url-border: #282624;
    --color-result-search-url-font:   #E6E4E1;
    --color-result-keyvalue-col-table:#1C1B1A;
    --color-result-keyvalue-odd:      #1C1B1A;
    --color-result-keyvalue-even:     #1F1E1D;
    --color-result-detail-background: #0F0E0D;
    --color-result-detail-font:       #E6E4E1;
    --color-result-detail-link:       #57B98A;
    --color-result-detail-hr:         #282624;
    --color-result-detail-label-font: #888582;
    --color-result-image-background:  #1F1E1D;
    --color-result-image-span-font:   #8A8784;
    --color-result-image-span-font-selected: #141312;
    --color-settings-tr-hover:        #242322;
    --color-settings-table-group-background: rgba(255,255,255,0.03);
    --color-settings-engine-description-font: #8A8784;
    --color-base-font:                #E6E4E1;
    --color-base-font-rgb:            230, 228, 225;
    --color-btn-background:           #4F7EF5;
    --color-btn-font:                 #F5F4F2;
    --color-show-btn-background:      #2C2B2A;
    --color-show-btn-font:            #E6E4E1;
    --color-search-background:        #222120;
    --color-search-border:            #353230;
    --color-search-shadow:            0 2px 12px rgba(0,0,0,0.40);
    --color-search-font:              #E6E4E1;
    --color-search-background-hover:  #4F7EF5;
    --color-categories-item-selected-font:   #5B8AFF;
    --color-categories-item-border-selected: #5B8AFF;
    --color-autocomplete-background:         #222120;
    --color-autocomplete-border:             #353230;
    --color-autocomplete-shadow:             0 4px 16px rgba(0,0,0,0.48);
    --color-autocomplete-background-hover:   #282624;
    --color-autocomplete-font:               #E6E4E1;
    --color-error:                    #E06060;
    --color-error-background:         #2A1010;
    --color-warning:                  #D4A830;
    --color-warning-background:       #2A2208;
    --color-success:                  #5DB87A;
    --color-success-background:       #0A2212;
    --color-url-font:                 #57B98A;
    --color-url-visited-font:         #B090D4;
    --color-result-url-font:          #57B98A;
    --color-result-link-font:         #7AB8E8;
    --color-result-link-font-highlight: #5B8AFF;
    --color-result-link-visited-font:   #B090D4;
    --color-result-publishdate-font:    #888582;
    --color-result-engines-font:        #888582;
    --color-result-description-highlight-font: #E6E4E1;
    --color-toolkit-badge-background: #282624;
    --color-toolkit-badge-font:       #8A8784;
    --color-toolkit-kbd-background:   #E6E4E1;
    --color-toolkit-kbd-font:         #141312;
    --color-toolkit-dialog-background:#1C1B1A;
    --color-toolkit-dialog-border:    #282624;
    --color-toolkit-tabs-label-border:#141312;
    --color-toolkit-tabs-section-border: #282624;
    --color-toolkit-select-background:#222120;
    --color-toolkit-select-border:    #353230;
    --color-toolkit-select-background-hover: #282624;
    --color-toolkit-input-text-font:  #E6E4E1;
    --color-toolkit-checkbox-onoff-off-background: #222120;
    --color-toolkit-checkbox-onoff-on-background:  #222120;
    --color-toolkit-checkbox-onoff-on-mark-background:  #5B8AFF;
    --color-toolkit-checkbox-onoff-on-mark-color:       #141312;
    --color-toolkit-checkbox-onoff-off-mark-background: #5C5A58;
    --color-toolkit-checkbox-onoff-off-mark-color:      #141312;
    --color-toolkit-checkbox-label-background: #222120;
    --color-toolkit-checkbox-label-border:     #282624;
    --color-toolkit-checkbox-input-border:     #5B8AFF;
    --color-toolkit-engine-tooltip-background: #1C1B1A;
    --color-toolkit-engine-tooltip-border:     #282624;
    --color-toolkit-loader-border:    rgba(255,255,255,0.10);
    --color-toolkit-loader-borderleft: transparent;
    --color-doc-code:                 #D0CEC8;
    --color-doc-code-background:      #1E2438;
    --color-bar-chart-primary:        #5B8AFF;
    --color-bar-chart-secondary:      #52908C;
    --color-image-resolution-background: rgba(0,0,0,0.65);
    --color-image-resolution-font:    #FFF;
    --color-loading-indicator:        rgba(255,255,255,0.08);
    --color-loading-indicator-gap:    #141312;
    --color-line-number:              #888582;
    --color-favicon-background-color: #282624;
    --color-favicon-border-color:     #353230;
    --g-accent:      #5B8AFF;
    --g-url-domain:  #56C490;
    --g-url-path:    #38C0CE;
    --g-title:       #79B8FF;
    --g-snippet:     #B8B4AE;
    --g-date:        #888582;
    --g-engines:     #5E5C5A;
    --g-border:      #282624;
    --g-surface:     #1F1E1D;
    --g-focus-ring:  rgba(91,138,255,0.20);
  }
}

/* ================================================================
   BASE
   ================================================================ */
* { box-sizing: border-box; }

body {
  font-family: var(--g-ui);
  font-size: 15px;
  line-height: 1.6;
  background: var(--color-base-background);
  color: var(--color-base-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

main { overflow-x: hidden; }

/* ================================================================
   BRANDING — hide SVG wordmark, show text
   ================================================================ */
#search_logo svg { display: none !important; }

#search_logo [hidden] {
  display: block !important;
  font-family: var(--g-ui);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--g-accent);
  line-height: 1;
  padding: 2px 0;
}

/* Index page h1 */
.title h1 {
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--g-accent) !important;
  margin: 0 0 1.5rem;
  font-style: normal !important;
}

.index .title { text-align: center; }

/* ================================================================
   TOP NAV (about / preferences)
   ================================================================ */
#links_on_top {
  background: var(--color-header-background);
  border-bottom: 1px solid var(--g-border);
  padding: 0.25rem 1.25rem;
  display: flex;
  gap: 0.15rem;
  justify-content: flex-end;
  align-items: center;
}

#links_on_top a {
  font-size: 11.5px;
  color: var(--g-date);
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: color 0.12s, background 0.12s;
  text-decoration: none;
}

#links_on_top a:hover {
  color: var(--g-accent);
  background: rgba(128,80,30,0.08);
  text-decoration: none;
}

html.theme-dark #links_on_top a:hover,
.theme-dark #links_on_top a:hover {
  background: rgba(91,138,255,0.10);
}

@media (prefers-color-scheme: dark) {
  :root.theme-auto #links_on_top a:hover {
    background: rgba(91,138,255,0.10);
  }
}

#links_on_top a svg { width: 15px; height: 15px; opacity: 0.75; }
#links_on_top a:hover svg { opacity: 1; }

/* ================================================================
   SEARCH HEADER — logo + search on row 1, categories on row 2
   ================================================================ */
#search_header {
  background: var(--color-header-background);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0;
}

#search_logo {
  text-decoration: none;
  flex-shrink: 0;
  padding: 0.55rem 0 0.55rem 1.25rem;
}

#search_view {
  flex: 1;
  min-width: 180px;
  padding: 0.55rem 1.25rem 0.55rem 0.75rem;
}

/* Search input */
.search_box {
  display: flex;
  align-items: center;
  gap: 0;
}

#q {
  font-family: var(--g-ui);
  font-size: 15px;
  background: var(--color-search-background);
  color: var(--color-search-font);
  border: 1px solid var(--color-search-border);
  border-right: none;
  border-radius: 6px 0 0 6px;
  padding: 0.4rem 0.8rem;
  transition: border-color 0.15s, box-shadow 0.15s;
  flex: 1;
  min-width: 0;
}

#q:focus {
  outline: none;
  border-color: var(--g-accent);
  box-shadow: 0 0 0 2px var(--g-focus-ring);
  z-index: 1;
  position: relative;
}

#clear_search {
  background: var(--color-search-background);
  border: 1px solid var(--color-search-border);
  border-left: none;
  border-right: none;
  color: var(--g-date);
  cursor: pointer;
  padding: 0.4rem 0.3rem;
  opacity: 0.5;
  transition: opacity 0.12s;
  display: flex;
  align-items: center;
}

#clear_search:hover { opacity: 1; }

#send_search {
  background: var(--g-accent);
  color: var(--color-btn-font);
  border: 1px solid var(--g-accent);
  border-radius: 0 6px 6px 0;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  transition: opacity 0.12s;
  display: inline-flex;
  align-items: center;
}

#send_search:hover { opacity: 0.85; }

/* ================================================================
   CATEGORY TABS — own row, full-width, scrollable
   ================================================================ */
#categories {
  flex-basis: 100%;
  background: var(--color-header-background);
  border-top: 1px solid var(--g-border);
  border-bottom: 1px solid var(--g-border);
}

#categories_container {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 0 1.25rem;
  gap: 0;
  scrollbar-width: none;
}

#categories_container::-webkit-scrollbar { display: none; }

.category.category_button {
  font-family: var(--g-ui);
  font-size: 12px;
  font-weight: 500;
  padding: 0.45rem 0.8rem;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--color-base-font);
  cursor: pointer;
  white-space: nowrap;
  opacity: 0.55;
  transition: opacity 0.12s, border-color 0.12s, color 0.12s;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  text-decoration: none;
}

.category.category_button:hover {
  opacity: 0.9;
  text-decoration: none;
}

.category.category_button.selected {
  opacity: 1;
  color: var(--g-accent);
  border-bottom-color: var(--g-accent);
}

.category_name { font-size: 12px; }

.category.category_button svg { width: 14px; height: 14px; }

/* Checkbox-style categories */
.category_checkbox input[type="checkbox"] { display: none; }

.category_checkbox label {
  font-size: 12px;
  padding: 0.45rem 0.8rem;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  opacity: 0.55;
  transition: opacity 0.12s, color 0.12s, border-color 0.12s;
}

.category_checkbox input:checked + label {
  opacity: 1;
  color: var(--g-accent);
  border-bottom-color: var(--g-accent);
}

/* ================================================================
   SEARCH FILTERS BAR
   ================================================================ */
.search_filters {
  background: var(--color-header-background);
  border-bottom: 1px solid var(--g-border);
  padding: 0.2rem 1.25rem;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.search_filters::-webkit-scrollbar { display: none; }

.search_filters select {
  font-family: var(--g-ui);
  font-size: 11px;
  background: transparent;
  border: 1px solid var(--g-border);
  color: var(--color-base-font);
  border-radius: 20px;
  padding: 0.15rem 0.5rem;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  opacity: 0.8;
  transition: opacity 0.1s, border-color 0.1s;
}

.search_filters select:hover,
.search_filters select:focus {
  opacity: 1;
  border-color: var(--g-accent);
  outline: none;
}

/* ================================================================
   RESULTS LAYOUT
   ================================================================ */
#results {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 1.25rem;
  display: grid;
  grid-template-columns: 1fr 240px;
  grid-template-rows: auto;
  align-content: start;
  gap: 0 1.25rem;
  min-height: calc(100vh - 90px);
}

#urls {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

#sidebar {
  grid-column: 2;
  grid-row: 1;
}

#corrections { grid-column: 1; }
#pagination { grid-column: 1; }
#backToTop { grid-column: 1; }

@media (max-width: 800px) {
  #results { grid-template-columns: 1fr; }
  #sidebar { grid-column: 1; grid-row: auto; }
  #urls { grid-row: auto; }
}

/* ================================================================
   RESULT CARDS
   ================================================================ */
article.result {
  background: var(--color-result-background);
  border: 1px solid var(--color-result-border);
  border-radius: 8px;
  padding: 0.75rem 1rem 0.6rem;
  margin-bottom: 0.55rem;
  transition: border-color 0.12s;
  position: relative;
}

article.result:hover {
  border-color: rgba(191,90,26,0.30);
}

html.theme-dark article.result:hover {
  border-color: rgba(91,138,255,0.28);
}

@media (prefers-color-scheme: dark) {
  :root.theme-auto article.result:hover {
    border-color: rgba(91,138,255,0.28);
  }
}

/* ── URL breadcrumb ──────────────────────────────────────────── */
.url_header {
  text-decoration: none !important;
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 1px;
  flex-wrap: wrap;
}

.url_header:hover { text-decoration: none !important; }

/* domain — green */
.url_o1 .url_i1 {
  font-family: var(--g-mono);
  font-size: 11px;
  color: var(--g-url-domain);
  font-weight: 500;
}

/* path segments — teal */
.url_o2 .url_i2,
.url_o3 .url_i3,
.url_o4 .url_i4,
.url_o5 .url_i5,
.url_o6 .url_i6 {
  font-family: var(--g-mono);
  font-size: 11px;
  color: var(--g-url-path);
}

/* ── Result title ─────────────────────────────────────────────── */
article.result h3 {
  margin: 0.15rem 0 0.2rem;
  font-size: 0.975rem;
  line-height: 1.35;
  font-weight: 600;
}

article.result h3 a {
  color: var(--g-title);
  text-decoration: none;
}

article.result h3 a:hover {
  color: var(--g-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Snippet ─────────────────────────────────────────────────── */
p.content {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--g-snippet);
  margin: 0.15rem 0 0.35rem;
}

/* search term highlights */
p.content b,
p.content strong {
  color: var(--g-accent);
  font-weight: 600;
  background: rgba(191,90,26,0.10);
  padding: 0 2px;
  border-radius: 2px;
}

html.theme-dark p.content b,
html.theme-dark p.content strong {
  background: rgba(91,138,255,0.14);
}

@media (prefers-color-scheme: dark) {
  :root.theme-auto p.content b,
  :root.theme-auto p.content strong {
    background: rgba(91,138,255,0.14);
  }
}

/* ── Engine sources — light/muted inline text (like "cached") ── */
.engines {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 0.25rem;
}

.engines span {
  font-family: var(--g-mono);
  font-size: 10.5px;
  font-weight: 400;
  background: none;
  border: none;
  color: var(--g-engines, var(--g-date));
  padding: 0;
  letter-spacing: 0.01em;
}

/* separator dots between engine names */
.engines span + span::before {
  content: '·';
  margin-right: 6px;
  color: var(--g-date);
  opacity: 0.5;
}

/* ── Date / metadata ─────────────────────────────────────────── */
time.published_date,
.published_date {
  font-family: var(--g-mono);
  font-size: 10.5px;
  color: var(--g-date);
  opacity: 0.85;
  margin-right: 0.5rem;
}

.result_length,
.result_views,
.result_author {
  font-family: var(--g-mono);
  font-size: 10.5px;
  color: var(--g-date);
  opacity: 0.85;
}

/* ── Cache link ──────────────────────────────────────────────── */
a.cache_link {
  font-family: var(--g-mono);
  font-size: 10.5px;
  color: var(--g-date);
  opacity: 0.6;
  text-decoration: none;
}

a.cache_link:hover { opacity: 1; color: var(--g-accent); }

/* ── Ellipsis button ─────────────────────────────────────────── */
.engines svg {
  color: var(--g-date);
  opacity: 0.5;
  width: 12px;
  height: 12px;
}

/* ── Favicon ─────────────────────────────────────────────────── */
.favicon {
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
}

.favicon img { border-radius: 2px; opacity: 0.85; }

/* ── Highlight badge (metadata) ─────────────────────────────── */
.highlight {
  font-size: 12px;
  color: var(--g-date);
  font-style: italic;
  margin: 0.2rem 0;
}

/* ── Break element ───────────────────────────────────────────── */
.break { flex-basis: 100%; height: 0; }

/* ================================================================
   SIDEBAR
   ================================================================ */
#sidebar {
  background: var(--g-surface);
  border: 1px solid var(--g-border);
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
  font-size: 12.5px;
  align-self: start;
  position: sticky;
  top: 0.75rem;
  overflow: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

#result_count {
  margin: 0 0 0.5rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--g-border);
}

#result_count small {
  font-family: var(--g-mono);
  font-size: 10px;
  color: var(--g-date);
  letter-spacing: 0.02em;
}

.sidebar-collapsible > summary.title {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--g-date);
  cursor: pointer;
  padding: 0.25rem 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  user-select: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-collapsible > summary.title::-webkit-details-marker { display: none; }

.sidebar-collapsible > summary.title::before {
  content: '›';
  font-size: 13px;
  line-height: 1;
  transition: transform 0.12s;
  display: inline-block;
  width: 10px;
  flex-shrink: 0;
}

details[open] > summary.title::before { transform: rotate(90deg); }

/* Suggestions / corrections */
#suggestions .suggestion a,
#corrections a {
  font-size: 12px;
  color: var(--g-title);
  text-decoration: none;
  display: inline-block;
  padding: 2px 7px;
  background: var(--color-base-background);
  border: 1px solid var(--g-border);
  border-radius: 4px;
  margin: 2px;
  transition: border-color 0.1s, color 0.1s;
}

#suggestions .suggestion a:hover,
#corrections a:hover {
  border-color: var(--g-accent);
  color: var(--g-accent);
  text-decoration: none;
}

/* Infobox */
#infoboxes .infobox {
  font-size: 12px;
  line-height: 1.5;
}

#infoboxes .infobox .title {
  font-weight: 600;
  font-size: 12.5px;
  color: var(--g-title);
  margin-bottom: 0.25rem;
}

/* Search URL in sidebar */
#sidebar input[type="text"],
#sidebar textarea {
  font-family: var(--g-mono);
  font-size: 10px;
  width: 100%;
  word-break: break-all;
  overflow-wrap: break-word;
}

/* ================================================================
   AUTOCOMPLETE
   ================================================================ */
.autocomplete {
  background: var(--color-autocomplete-background);
  border: 1px solid var(--color-autocomplete-border);
  border-radius: 8px;
  box-shadow: var(--color-autocomplete-shadow);
  overflow: hidden;
  margin-top: 3px;
}

.autocomplete li {
  font-size: 13.5px;
  padding: 0.42rem 0.85rem;
  cursor: pointer;
  transition: background 0.08s;
  list-style: none;
  color: var(--color-autocomplete-font);
}

.autocomplete li:hover,
.autocomplete li[aria-selected="true"] {
  background: var(--color-autocomplete-background-hover);
  color: var(--g-accent);
}

/* ================================================================
   ANSWER BOX
   ================================================================ */
#answers { margin-bottom: 0.65rem; }

.answer {
  background: var(--color-answer-background);
  border: 1px solid var(--g-border);
  border-left: 3px solid var(--g-accent);
  border-radius: 6px;
  padding: 0.7rem 1rem;
  font-size: 14px;
  color: var(--color-answer-font);
}

/* ================================================================
   AI ANSWER (async)
   ================================================================ */
#ai-answer {
  background: var(--color-answer-background);
  border: 1px solid var(--g-border);
  border-left: 3px solid var(--g-accent);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin-bottom: 0.85rem;
  font-size: 14px;
  color: var(--color-answer-font);
  line-height: 1.65;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#ai-answer.ai-answer-loading {
  opacity: 0.5;
}

#ai-answer.ai-answer-ready {
  opacity: 1;
}

.ai-answer-header {
  font-family: var(--g-ui);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--g-accent);
  margin-bottom: 0.4rem;
}

.ai-answer-icon {
  font-size: 10px;
  margin-right: 0.25rem;
}

.ai-answer-body {
  font-family: var(--g-ui);
  white-space: pre-wrap;
}

#ai-answer.ai-answer-loading .ai-answer-body {
  color: var(--g-date);
  font-style: italic;
}

/* ================================================================
   PAGINATION
   ================================================================ */
#pagination {
  margin: 1.25rem 0 0.5rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
}

#pagination button,
.page_number input[type="submit"],
.page_number input[type="button"],
.previous_page button,
.next_page button {
  font-family: var(--g-ui);
  font-size: 12.5px;
  background: var(--g-surface);
  border: 1px solid var(--g-border);
  color: var(--color-base-font);
  padding: 0.3rem 0.65rem;
  border-radius: 5px;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}

#pagination button:hover,
.page_number input[type="submit"]:hover,
.next_page button:hover,
.previous_page button:hover {
  border-color: var(--g-accent);
  color: var(--g-accent);
}

.page_number input[type="button"].page_number_current {
  border-color: var(--g-accent);
  color: var(--g-accent);
  font-weight: 600;
  background: rgba(191,90,26,0.07);
}

html.theme-dark .page_number input[type="button"].page_number_current {
  background: rgba(91,138,255,0.12);
}

@media (prefers-color-scheme: dark) {
  :root.theme-auto .page_number input[type="button"].page_number_current {
    background: rgba(91,138,255,0.12);
  }
}

.numbered_pagination {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
  align-items: center;
}

/* ================================================================
   BACK TO TOP
   ================================================================ */
#backToTop {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 100;
}

#backToTop a {
  background: var(--g-surface);
  border: 1px solid var(--g-border);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--g-date);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition: border-color 0.12s, color 0.12s;
  text-decoration: none;
}

#backToTop a:hover {
  border-color: var(--g-accent);
  color: var(--g-accent);
}

/* ================================================================
   FOOTER
   ================================================================ */
footer {
  background: var(--color-footer-background);
  border-top: 1px solid var(--g-border);
  padding: 0.8rem 1.25rem;
  text-align: center;
  font-size: 11px;
  color: var(--g-date);
  margin-top: 1.5rem;
}

footer a {
  color: var(--g-date);
  text-decoration: underline;
  text-underline-offset: 2px;
}

footer a:hover { color: var(--g-accent); }

/* ================================================================
   PREFERENCES PAGE
   ================================================================ */
#main_preferences {
  max-width: 900px;
  margin: 0 auto;
  padding: 1.25rem;
}

.preferences_back a {
  font-size: 13px;
  color: var(--g-accent);
  text-decoration: none;
}

.preferences_back a:hover { text-decoration: underline; }

h1.title, h2.title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-base-font);
  margin-bottom: 0.5rem;
}

/* ================================================================
   DIALOG / MODAL
   ================================================================ */
dialog, .dialog {
  background: var(--color-toolkit-dialog-background);
  border: 1px solid var(--color-toolkit-dialog-border);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  padding: 1.25rem;
  color: var(--color-base-font);
  max-width: 640px;
  width: 90vw;
}

/* ================================================================
   SCROLLBARS
   ================================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(140,100,60,0.25);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(140,100,60,0.45); }

html.theme-dark ::-webkit-scrollbar-thumb { background: rgba(160,155,150,0.18); }
html.theme-dark ::-webkit-scrollbar-thumb:hover { background: rgba(160,155,150,0.35); }

/* ================================================================
   ERROR / ALERT
   ================================================================ */
.dialog-error {
  background: var(--color-error-background);
  border: 1px solid var(--color-error);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin: 0.5rem;
  font-size: 13px;
  color: var(--color-error);
}

/* ================================================================
   INDEX PAGE — full centered layout
   ================================================================ */
.index {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  padding: 2rem 1rem;
}

.index #search {
  width: 100%;
  max-width: 620px;
}

.index #search_header {
  background: transparent;
  border: none;
  padding: 0;
  justify-content: center;
}

.index #search_logo { display: none; }

/* Override the original focus-within rule that strips border-radius and adds border-bottom */
.index .search_box,
.index #search_view:focus-within .search_box {
  border: 1.5px solid var(--g-accent) !important;
  border-bottom: 1.5px solid var(--g-accent) !important;
  border-radius: 10px !important;
  background: var(--color-search-background) !important;
  box-shadow: var(--color-search-shadow) !important;
  transition: border-color 0.15s, box-shadow 0.15s;
  overflow: hidden;
  width: auto !important;
  max-width: 100%;
}

.index .search_box:focus-within {
  box-shadow: 0 0 0 3px var(--g-focus-ring), var(--color-search-shadow) !important;
}

/* Kill all inner borders from original focus-within reset */
.index .search_box *,
.index #search_view:focus-within .search_box * {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.index #q {
  font-size: 16px;
  padding: 0.75rem 1rem;
  background: transparent !important;
  outline: none !important;
  color: var(--color-search-font);
}

.index #clear_search {
  background: transparent !important;
  color: var(--g-date);
  padding: 0.4rem;
}

.index #send_search {
  background: var(--g-accent) !important;
  color: var(--color-btn-font) !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 0.75rem 1rem;
}

.index #categories {
  background: transparent;
  border: none !important;
  margin-top: 0.5rem;
}

.index #categories_container {
  justify-content: center;
  flex-wrap: wrap;
  padding: 0;
}

.index #links_on_top {
  background: transparent;
  border: none;
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  z-index: 10;
}

.index .search_filters { display: none; }

/* Prevent anything from causing horizontal overflow on index */
.index_endpoint { overflow-x: hidden; }
#main_index { position: relative; overflow: hidden; }

/* ================================================================
   LOADING INDICATOR
   ================================================================ */
#loading-indicator {
  border-color: var(--color-loading-indicator);
  border-left-color: var(--g-accent);
}

/* ================================================================
   MOBILE (≤ 640px)
   ================================================================ */
@media (max-width: 640px) {

  /* Hide top utility links bar — reclaims header space on mobile */
  #links_on_top { display: none !important; }

  /* Sticky search header with fully opaque bg so content doesn't
     bleed through when scrolling behind it */
  #search_header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-header-background);
    border-bottom: 1px solid var(--g-border);
    box-shadow: 0 1px 8px rgba(0,0,0,0.18);
  }

  /* Compact header row padding */
  #search_logo { padding: 0.38rem 0 0.38rem 0.85rem; }
  #search_view { padding: 0.38rem 0.85rem 0.38rem 0.5rem; }
  #q { padding: 0.35rem 0.65rem; }
  #clear_search { padding: 0.35rem 0.25rem; }
  #send_search { padding: 0.35rem 0.6rem; }

  /* Categories and filters scroll away — solid bg so no bleed */
  #categories {
    background: var(--color-header-background);
  }
  .search_filters {
    background: var(--color-header-background);
    padding: 0.15rem 0.75rem;
  }

  /* Sidebar: static on mobile (it stacks above results via grid) */
  #sidebar {
    position: static;
    padding: 0.35rem 0.65rem;
    margin-bottom: 0.5rem;
  }

  /* Hide response time and search URL debug panels on mobile — not useful for search */
  #sidebar details.sidebar-collapsible {
    display: none;
  }

  /* Tighter results padding */
  #results { padding: 0.65rem 0.75rem; }

  /* Compact footer */
  footer {
    padding: 0.45rem 0.75rem;
    margin-top: 0.65rem;
    font-size: 10px;
    line-height: 1.5;
  }
}