/* ──────────────────────────────────────────────────────────────────────────
   FreeAIapikey site theme: "Cobalt" — cool porcelain surfaces, ink text and
   one cobalt accent; midnight navy in dark mode. Same palette as the web
   chat (gateway-rs/src/webchat/chat.html). Light by default, follows the
   device, and honours the saved choice in localStorage "chat.theme" (shared
   with the chat) through <html data-theme="light|dark">.

   Colours used by Tailwind are stored as "R G B" channels (--c-*) so that
   utilities like bg-ink/5 or text-accent-ink/80 work. Plain rgba tokens
   (--border, --bg-hover …) are for hand-written CSS.

   Every text/background pair meets WCAG AA (body text >= 4.5:1, white on
   the button fill >= 4.9:1 in both modes).
   ────────────────────────────────────────────────────────────────────────── */

:root {
  /* surfaces */
  --c-bg: 247 248 250;          /* #f7f8fa page (porcelain) */
  --c-bg-2: 240 242 246;        /* #f0f2f6 sidebar / band */
  --c-elev: 255 255 255;        /* #ffffff cards, inputs, menus */
  --c-sunk: 233 236 242;        /* #e9ecf2 wells, user bubble */
  --c-code: 242 244 248;        /* #f2f4f8 code blocks */
  /* text */
  --c-text: 17 20 28;           /* #11141c ink */
  --c-text-2: 74 81 96;         /* #4a5160 */
  --c-text-3: 98 107 125;       /* #626b7d (AA on page and band) */
  --c-inverse: 247 248 250;     /* text on ink-filled buttons */
  /* brand: cobalt */
  --c-accent: 61 90 254;        /* #3d5afe marks, icons, focus */
  --c-accent-strong: 47 77 224; /* #2f4de0 filled buttons (white text 6.4:1) */
  --c-accent-hover: 39 64 196;  /* #2740c4 */
  --c-accent-ink: 44 71 209;    /* #2c47d1 accent-coloured text/links */
  --c-on-accent: 255 255 255;
  /* status */
  --c-success: 47 122 69;       /* #2f7a45 */
  --c-warning: 143 90 0;        /* #8f5a00 */
  --c-danger: 180 35 24;        /* #b42318 */
  --c-info: 14 116 144;         /* #0e7490 teal, kept apart from the cobalt accent */
  --c-plum: 110 79 176;         /* #6e4fb0 category tags */
  /* Solid fills behind white text (admin approve/reject buttons): the same
     deep shade in both modes, so they are not redefined for dark. */
  --c-success-solid: 47 122 69;
  --c-danger-solid: 180 35 24;
  --c-warning-solid: 143 90 0;
  --c-info-solid: 14 116 144;
  --c-plum-solid: 110 79 176;

  --border: rgba(17, 20, 28, .1);
  --border-strong: rgba(17, 20, 28, .19);
  --bg-hover: rgba(17, 20, 28, .05);
  --bg-active: rgba(17, 20, 28, .085);
  --accent-soft: rgba(61, 90, 254, .1);
  --shadow-sm: 0 1px 2px rgba(17, 20, 28, .05);
  --shadow-md: 0 1px 2px rgba(17, 20, 28, .04), 0 6px 24px rgba(17, 20, 28, .06);
  --shadow-lg: 0 2px 6px rgba(17, 20, 28, .06), 0 12px 32px rgba(17, 20, 28, .12);
  --scrim: rgba(9, 11, 16, .5);
  --mark-l: inline;             /* brand mark: charcoal artwork on light */
  --mark-d: none;

  --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Source Serif 4", ui-serif, Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --bg: rgb(var(--c-bg));
  --bg-2: rgb(var(--c-bg-2));
  --bg-elev: rgb(var(--c-elev));
  --bg-sunk: rgb(var(--c-sunk));
  --bg-code: rgb(var(--c-code));
  --text: rgb(var(--c-text));
  --text-2: rgb(var(--c-text-2));
  --text-3: rgb(var(--c-text-3));
  --accent: rgb(var(--c-accent));
  --accent-strong: rgb(var(--c-accent-strong));
  --accent-ink: rgb(var(--c-accent-ink));
  --success: rgb(var(--c-success));
  --warning: rgb(var(--c-warning));
  --danger: rgb(var(--c-danger));
  --info: rgb(var(--c-info));
  --plum: rgb(var(--c-plum));

  color-scheme: light;
}

/* Dark: midnight navy. Same block twice: once for "follow the device",
   once for an explicit choice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg: 13 16 23;           /* #0d1017 */
    --c-bg-2: 9 11 16;          /* #090b10 */
    --c-elev: 21 26 35;         /* #151a23 */
    --c-sunk: 6 8 12;           /* #06080c */
    --c-code: 16 20 28;         /* #10141c */
    --c-text: 237 240 246;      /* #edf0f6 */
    --c-text-2: 176 184 199;    /* #b0b8c7 */
    --c-text-3: 138 147 166;    /* #8a93a6 */
    --c-inverse: 13 16 23;
    --c-accent: 123 147 255;    /* #7b93ff */
    --c-accent-strong: 68 98 242;/* #4462f2 (white text 4.9:1) */
    --c-accent-hover: 58 86 224;
    --c-accent-ink: 159 176 255;/* #9fb0ff */
    --c-success: 124 196 143;
    --c-warning: 229 181 103;
    --c-danger: 249 112 102;
    --c-info: 103 210 230;
    --c-plum: 196 167 255;
    --border: rgba(255, 255, 255, .09);
    --border-strong: rgba(255, 255, 255, .17);
    --bg-hover: rgba(255, 255, 255, .055);
    --bg-active: rgba(255, 255, 255, .09);
    --accent-soft: rgba(123, 147, 255, .15);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, .25), 0 6px 24px rgba(0, 0, 0, .25);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .45);
    --scrim: rgba(0, 0, 0, .6);
    --mark-l: none;             /* original white artwork on dark */
    --mark-d: inline;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --c-bg: 13 16 23;
  --c-bg-2: 9 11 16;
  --c-elev: 21 26 35;
  --c-sunk: 6 8 12;
  --c-code: 16 20 28;
  --c-text: 237 240 246;
  --c-text-2: 176 184 199;
  --c-text-3: 138 147 166;
  --c-inverse: 13 16 23;
  --c-accent: 123 147 255;
  --c-accent-strong: 68 98 242;
  --c-accent-hover: 58 86 224;
  --c-accent-ink: 159 176 255;
  --c-success: 124 196 143;
  --c-warning: 229 181 103;
  --c-danger: 249 112 102;
  --c-info: 103 210 230;
  --c-plum: 196 167 255;
  --border: rgba(255, 255, 255, .09);
  --border-strong: rgba(255, 255, 255, .17);
  --bg-hover: rgba(255, 255, 255, .055);
  --bg-active: rgba(255, 255, 255, .09);
  --accent-soft: rgba(123, 147, 255, .15);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, .25), 0 6px 24px rgba(0, 0, 0, .25);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .45);
  --scrim: rgba(0, 0, 0, .6);
  --mark-l: none;
  --mark-d: inline;
  color-scheme: dark;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Zero specificity, so any utility class (font-sans, font-semibold …) wins. */
:where(h1, h2) {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
:where(h3, h4, h5, h6) { letter-spacing: -0.01em; text-wrap: balance; }
.font-mono, [class*="font-mono"], .tabular { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: rgba(61, 90, 254, .2); color: inherit; }

/* Form controls: hand-written defaults; Tailwind classes on the element win.
   The leading `html` gives these base rules one element of specificity so
   they beat Tailwind's preflight (`* { border-width: 0 }`, injected after
   this file) while any utility class (0,1,0) still overrides them. */
html :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=hidden]):not([type=file]), textarea, select) {
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
:where(input, textarea, select):focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
html :is(input, textarea)::placeholder { color: var(--text-3); opacity: 1; }
input[type=checkbox], input[type=radio], input[type=range] { accent-color: var(--accent-strong); }

html :where(th) {
  font-weight: 500;
  font-size: .75rem;
  letter-spacing: .02em;
  color: var(--text-3);
  border-bottom: 1px solid var(--border);
  padding: .75rem 1rem;
  text-align: left;
}
html :where(td) { padding: .75rem 1rem; border-bottom: 1px solid var(--border); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--text-3); }
* { scrollbar-color: var(--border-strong) transparent; }

@keyframes fadeInUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
main { animation: fadeInUp .35s ease-out; }

/* ── Brand mark (two-drop logo; see --mark-l / --mark-d) ───────────────── */
.mark { color: var(--accent); flex: none; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: 2.375rem; padding: 0 1rem; border-radius: 10px;
  font-size: .875rem; font-weight: 500; line-height: 1; white-space: nowrap;
  border: 1px solid var(--border-strong); background: var(--bg-elev); color: var(--text);
  text-decoration: none; cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease, transform .1s ease;
}
.btn:hover { background: var(--bg-hover); }
.btn:active { transform: scale(.98); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.btn-sm { height: 2rem; padding: 0 .75rem; font-size: .8125rem; border-radius: 9px; }
.btn-lg { height: 2.875rem; padding: 0 1.375rem; font-size: .9375rem; border-radius: 12px; }
.btn-primary, .btn-accent {
  background: var(--accent-strong); color: rgb(var(--c-on-accent)); border-color: transparent; font-weight: 600;
}
.btn-primary:hover, .btn-accent:hover { background: rgb(var(--c-accent-hover)); }
.btn-ink { background: var(--text); color: rgb(var(--c-inverse)); border-color: transparent; }
.btn-ink:hover { background: color-mix(in srgb, var(--text) 86%, var(--bg)); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--bg-hover); color: var(--text); }
.btn-danger { background: var(--danger); color: #fff; border-color: transparent; }

/* Legacy .btn-primary used without .btn (old templates): give it the box. */
:where(.btn-primary:not(.btn)) { padding: .5rem 1.25rem; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }

/* ── Cards, badges, misc ──────────────────────────────────────────────── */
.card, .tech-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.card-hover:hover, a.card:hover, .tech-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .75rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-ink);
}
.badge {
  display: inline-flex; align-items: center; gap: .3rem; padding: .125rem .5rem; border-radius: 999px;
  font-size: .75rem; font-weight: 500; background: var(--bg-hover); color: var(--text-2); white-space: nowrap;
}
.badge-accent { background: var(--accent-soft); color: var(--accent-ink); }
.badge-success { background: rgb(var(--c-success) / .12); color: var(--success); }
.badge-warning { background: rgb(var(--c-warning) / .14); color: var(--warning); }
.badge-danger { background: rgb(var(--c-danger) / .1); color: var(--danger); }
.badge-info { background: rgb(var(--c-info) / .1); color: var(--info); }
/* Small "Beta" tag next to a nav link or a heading (the Lab). */
.beta-tag {
  display: inline-block; margin-left: .35rem; padding: .2rem .4rem; border-radius: 999px;
  font: 600 .625rem/1 var(--font-ui); letter-spacing: .04em; text-transform: uppercase;
  background: var(--accent-soft); color: var(--accent-ink); vertical-align: .1rem;
}
.link { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.link:hover { text-decoration-thickness: 2px; }
kbd, .kbd {
  font-family: var(--font-mono); font-size: .75em; padding: .1em .4em; border-radius: 6px;
  background: var(--bg-elev); border: 1px solid var(--border-strong); box-shadow: 0 1px 0 var(--border-strong);
}
.code-panel {
  background: var(--bg-code); border: 1px solid var(--border); border-radius: 12px;
  font-family: var(--font-mono); font-size: .8125rem; line-height: 1.65; color: var(--text);
}
.hairline { border-color: var(--border); }

/* ── Site header ──────────────────────────────────────────────────────── */
.site-nav {
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav-link {
  color: var(--text-2); font-size: .875rem; font-weight: 450; border-radius: 8px;
  transition: color .12s ease, background-color .12s ease;
}
.nav-link:hover { color: var(--text); background: var(--bg-hover); }
.nav-link[aria-current="page"] { color: var(--text); background: var(--bg-active); }
.icon-btn {
  width: 2.25rem; height: 2.25rem; display: inline-grid; place-items: center; border-radius: 9px;
  color: var(--text-2); transition: background-color .12s ease, color .12s ease;
}
.icon-btn:hover { background: var(--bg-hover); color: var(--text); }
.avatar {
  width: 1.75rem; height: 1.75rem; border-radius: 50%; display: inline-grid; place-items: center; flex: none;
  background: var(--text); color: rgb(var(--c-inverse)); font-size: .75rem; font-weight: 600; text-transform: uppercase;
}
/* Theme toggle: show the icon for the mode you would switch to. */
.theme-sun, .theme-moon { width: 18px; height: 18px; }
.theme-sun { display: none; }
:root[data-theme="dark"] .theme-sun { display: block; }
:root[data-theme="dark"] .theme-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-sun { display: block; }
  :root:not([data-theme="light"]) .theme-moon { display: none; }
}

#mobile-menu { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .25s ease, opacity .2s ease; }
#mobile-menu.open { max-height: 560px; opacity: 1; }

/* Segmented control (footer theme picker, tabs). */
.seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--bg-hover); border-radius: 10px; }
.seg button { display: inline-grid; place-items: center; padding: 5px 8px; border-radius: 7px; color: var(--text-3); }
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { background: var(--bg-elev); color: var(--text); box-shadow: var(--shadow-sm); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Logos drawn in white (Cline, OpenCode, Hermes) sit on a small ink tile in both modes. */
.logo-tile { display: inline-flex; align-items: center; justify-content: center; flex: none; background: #11141c; border-radius: 5px; padding: 2px 4px; }

/* Monochrome logos drawn in black (Codex): show as-is on light, inverted on dark. */
:root[data-theme="dark"] .logo-adapt { filter: invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-adapt { filter: invert(1); } }