/* ============================================================
   SeaOwl — Kagi Custom CSS theme
   ----------------------------------------------------------------
   Minimal re-skin of kagi.com. Keeps Kagi's structure, spacing,
   and chrome 100% intact — only overrides what genuinely needs
   to change for the SeaOwl identity:

     - Background       (cool dark navy, not pure black)
     - Selection        (brand cyan @ 30%)
     - Result titles    (brand cyan)
     - Visited links    (cool slate)
     - Yellow → cyan    (tab underline, primary CTA)
     - URL mono font    (the one functional SeaOwl move)
     - Scrollbar        (narrow, cyan thumb on hover)

   No borders. No widget chrome. No dropdown reframing.
   Kagi's defaults do the rest.

   Install: Kagi → Settings → Appearance → Custom CSS
   Or import: https://seaowl.unfuck.cloud/seaowl-kagi.css
   Source:  github.com/rosnovsky/seaowl
   ============================================================ */

:root {
  /* Single hue knob — flip the brand colour without touching
     anything else. 185 cyan / 145 green / 85 amber / 280 violet. */
  --sea-primary-h: 185;

  --sea-bg:        oklch(0.10 0.018 240);
  --sea-fg:        oklch(0.92 0.01  240);
  --sea-fg-muted:  oklch(0.62 0.018 240);
  --sea-fg-faint:  oklch(0.46 0.015 240);

  --sea-primary:   oklch(0.78 0.15 var(--sea-primary-h));
  --sea-accent:    oklch(0.84 0.16 var(--sea-primary-h));
  --sea-visited:   oklch(0.62 0.06 var(--sea-primary-h));

  --sea-font-mono: "Space Mono", "JetBrains Mono", "Fira Code", ui-monospace, monospace;
}

/* ----- Page background + base text ----- */
html,
body,
#app,
.app-box,
.body-content,
.a-w {
  background: var(--sea-bg) !important;
  color: var(--sea-fg) !important;
  color-scheme: dark;
}

/* Defeat Kagi's Tailwind dark utility that would re-paint the
   body to graphite-900 mid-navigation. Without this you get a
   visible flash on every route change. */
.dark\:bg-graphite-900:where(.dark, .dark *) {
  background: var(--sea-bg) !important;
}

/* ----- Selection — signature cyan @ 30% ----- */
::selection {
  background: oklch(0.75 0.16 var(--sea-primary-h) / 0.30);
  color: var(--sea-fg);
}

/* ----- Focus rings — accessibility, keyboard nav only ----- */
*:focus-visible {
  outline: 2px solid var(--sea-primary) !important;
  outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ----- Result titles → cyan ----- */
.__sri-title,
.__sri_title_link,
.__sri_title_link._0_URL,
.__srgi-title a,
.newsResultItem .newsResultHeader .newsResultTitle a._0_TITLE,
.wikipediaResult .wiki-title a,
.wikipediaResult a {
  color: var(--sea-primary) !important;
  text-decoration: none !important;
}

.__sri_title_link:hover,
.__srgi-title a:hover,
.newsResultItem .newsResultHeader .newsResultTitle a._0_TITLE:hover,
.wikipediaResult .wiki-title a:hover,
.wikipediaResult a:hover {
  color: var(--sea-accent) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* ----- Visited result titles — desaturated cool slate ----- */
.__sri_title_link:visited,
.__srgi-title a:visited {
  color: var(--sea-visited) !important;
}

/* ----- URL breadcrumb — mono. The one signature move that
   actually helps scanability (URLs read as code, not prose). ----- */
.__sri-url-box,
.__sri-url-box * {
  color: var(--sea-fg-muted) !important;
  font-family: var(--sea-font-mono) !important;
}

/* ----- Tab underline — yellow → cyan -----
   Casting a wide net since Kagi's exact tab class isn't
   confirmed; over-specific selectors were missing on v1-v3. */
.serp_tab.--active,
.serp_tab[aria-selected="true"],
.search-tab.--active,
[role="tab"][aria-selected="true"],
[role="tab"].--active,
[role="tab"].active {
  border-bottom-color: var(--sea-primary) !important;
}

/* ----- Yellow primary CTA → cyan ----- */
.btn.--yellow {
  background: var(--sea-primary) !important;
  color: var(--sea-bg) !important;
  border-color: var(--sea-primary) !important;
}

.btn.--yellow:hover {
  background: var(--sea-accent) !important;
  border-color: var(--sea-accent) !important;
  color: var(--sea-bg) !important;
}

/* Active filter chip — match the same yellow→cyan flip */
.chip-group .chip-button[aria-checked="true"] {
  color: var(--sea-primary) !important;
  border-color: var(--sea-primary) !important;
}

/* ----- Form text colour — inputs/textareas need explicit fg
   on a dark bg. No bg/border overrides — let Kagi style them. ----- */
input,
textarea,
select {
  color: var(--sea-fg) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--sea-fg-faint) !important;
}

/* ----- Scrollbar — narrow, brand thumb on hover ----- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--sea-bg);
}

::-webkit-scrollbar-thumb {
  background: oklch(0.32 0.035 240);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--sea-primary);
}

* {
  scrollbar-width: thin;
  scrollbar-color: oklch(0.32 0.035 240) var(--sea-bg);
}

/* End. ~5 KB, ~150 lines. */