/*
 * The tools site's own styles, loaded after the blog's (server.mjs puts those first).
 *
 * 1. Fallback palette: the blog's Dracula values, for the moment before the blog's stylesheet
 *    arrives (or if the blog can't be reached). Otherwise the blog's own palette and accent apply,
 *    so the header and footer look exactly as on the blog.
 * 2. The header and footer: as on the blog (sticky header, full-width footer).
 * 3. The tools: Dracula, whatever the blog's palette (--tl-*), with a color per category.
 * 4. The blog's stylesheet styles plain elements (input, label, h1…) for its own pages. The tools
 *    style those by class, so inside the tools (and their pop-ups) the blog's rules are undone.
 *    Each reset has the same weight as the blog rule it undoes and comes later, so it wins over that
 *    rule but not over the tools' own class rules.
 */

/* ---------- 1. Fallback palette ---------- */
html[data-palette='dracula'] {
  --bg: #f7f3df; --surface: #fffbeb; --surface-2: #efebd6; --tonal: #e4dfc6; --ink: #1f1f1f; --ink-soft: #6c664b; --line: #ddd8c0; --outline: #9a9478; --on-ink: #fffbeb;
  --ok: #14710a; --danger: #cb3a2a; --warn: #a34d14; --code-bg: #f6f2dd;
  --e1: 0 1px 2px rgba(60, 50, 20, .10), 0 1px 3px 1px rgba(60, 50, 20, .06);
  --e3: 0 4px 8px 3px rgba(60, 50, 20, .10), 0 1px 3px rgba(60, 50, 20, .14);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  html[data-palette='dracula']:not([data-theme='light']) {
    --bg: #14151c; --surface: #1c1d26; --surface-2: #262833; --tonal: #343746; --ink: #f8f8f2; --ink-soft: #a7aed3; --line: #2c2e3b; --outline: #6272a4; --on-ink: #14151c;
    --ok: #50fa7b; --danger: #ff6e6e; --warn: #ffb86c; --code-bg: #101117;
    --e1: 0 0 0 1px #262833, 0 1px 3px rgba(0, 0, 0, .7);
    --e3: 0 0 0 1px #343746, 0 8px 24px rgba(0, 0, 0, .8);
    color-scheme: dark;
  }
}
html[data-palette='dracula'][data-theme='dark'] {
  --bg: #14151c; --surface: #1c1d26; --surface-2: #262833; --tonal: #343746; --ink: #f8f8f2; --ink-soft: #a7aed3; --line: #2c2e3b; --outline: #6272a4; --on-ink: #14151c;
  --ok: #50fa7b; --danger: #ff6e6e; --warn: #ffb86c; --code-bg: #101117;
  --e1: 0 0 0 1px #262833, 0 1px 3px rgba(0, 0, 0, .7);
  --e3: 0 0 0 1px #343746, 0 8px 24px rgba(0, 0, 0, .8);
  color-scheme: dark;
}
:root {
  --font-head: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Source Serif 4', Georgia, serif;
  --font-ui: 'Roboto Flex', Roboto, system-ui, sans-serif;
  --font-code: 'JetBrains Mono', ui-monospace, monospace;
}

/* ---------- 3. Dracula for the tools: Alucard in light mode (the tools follow the header's light/dark button) ---------- */
:root {
  --tl-bg: #f7f3df; --tl-surface: #fffbeb; --tl-surface-2: #efebd6; --tl-line: #ddd8c0; --tl-fg: #1f1f1f; --tl-soft: #6c664b;
  --tl-purple: #644ac9; --tl-pink: #a3144d; --tl-cyan: #036a96; --tl-green: #14710a; --tl-orange: #a34d14; --tl-yellow: #846e15; --tl-red: #cb3a2a;
  --tl-primary: var(--tl-purple);
  --tl-glow: rgba(100, 74, 201, .18);
}
:root.dark {
  --tl-bg: #14151c; --tl-surface: #1c1d26; --tl-surface-2: #262833; --tl-line: #2c2e3b; --tl-fg: #f8f8f2; --tl-soft: #a7aed3;
  --tl-purple: #bd93f9; --tl-pink: #ff79c6; --tl-cyan: #8be9fd; --tl-green: #50fa7b; --tl-orange: #ffb86c; --tl-yellow: #f1fa8c; --tl-red: #ff5555;
  --tl-glow: rgba(189, 147, 249, .22);
}

/* ---------- Page ---------- */
body { margin: 0; }
/* The blog's header and footer sit right in the page, as on the blog: the header sticks to the top
   while scrolling (and lifts off the page), the footer runs full width. Their text size and font are
   the blog's (the tools set their own on <body>). */
unix3r-header, unix3r-footer { display: contents; }
unix3r-header, unix3r-footer, #blog-embed { font: 400 1.0625rem/1.65 var(--font-body); color: var(--ink); }
/* The blog's column (.wrap, 1120px), so the tools line up with the header and footer */
.tl-main { max-width: 1120px; min-height: 70vh; margin: 0 auto; padding: 0 16px; }
.tl-skip { position: absolute; left: -9999px; top: 8px; z-index: 1000; padding: 8px 14px; border-radius: 8px; background: var(--tl-primary); color: var(--tl-bg); }
.tl-skip:focus { left: 8px; }
#app ::selection, .v-binder-follower-container ::selection { background: var(--tl-glow); }

/* Scrollbars inside the tools (text boxes, code editors, tables, lists): Dracula purple on the tools' own
   background. The page's own scrollbar is the blog's (its accent), as on the blog. */
:root { --tl-scroll: rgba(100, 74, 201, .40); --tl-scroll-hover: #644ac9; }
:root.dark { --tl-scroll: rgba(189, 147, 249, .45); --tl-scroll-hover: #bd93f9; }
:is(#app, .v-binder-follower-container, .n-modal-container) * { scrollbar-width: thin; scrollbar-color: var(--tl-scroll) transparent; }
:is(#app, .v-binder-follower-container, .n-modal-container) *::-webkit-scrollbar { width: 8px; height: 8px; }
:is(#app, .v-binder-follower-container, .n-modal-container) *::-webkit-scrollbar-track { background: transparent; }
:is(#app, .v-binder-follower-container, .n-modal-container) *::-webkit-scrollbar-thumb { background: var(--tl-scroll); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
:is(#app, .v-binder-follower-container, .n-modal-container) *::-webkit-scrollbar-thumb:hover { background-color: var(--tl-scroll-hover); }
/* The code editors (Monaco, in JSON diff and others) draw their own */
#app .monaco-scrollable-element > .scrollbar > .slider { background: var(--tl-scroll) !important; border-radius: 6px; }
#app .monaco-scrollable-element > .scrollbar > .slider:hover, #app .monaco-scrollable-element > .scrollbar > .slider.active { background: var(--tl-scroll-hover) !important; }

/* Home: the tool cards fill the width they have (the grid was sized for the whole window) */
#app .grid-wrapper .grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)) !important; }
#app .grid-wrapper h3 { color: var(--tl-soft) !important; }

/* Tool cards: a Dracula color per category, purple border and glow on hover */
#app .tl-card { --c: var(--tl-purple); }
#app .tl-card[data-cat='crypto'] { --c: var(--tl-pink); }
#app .tl-card[data-cat='converter'] { --c: var(--tl-cyan); }
#app .tl-card[data-cat='web'] { --c: var(--tl-purple); }
#app .tl-card[data-cat='images'] { --c: var(--tl-orange); }
#app .tl-card[data-cat='development'] { --c: var(--tl-green); }
#app .tl-card[data-cat='network'] { --c: var(--tl-yellow); }
#app .tl-card[data-cat='text'] { --c: var(--tl-red); }

/* The tools list: each category's icons in its color */
.tl-sider [data-cat] { --c: var(--tl-soft); }
.tl-sider [data-cat='crypto'] { --c: var(--tl-pink); }
.tl-sider [data-cat='converter'] { --c: var(--tl-cyan); }
.tl-sider [data-cat='web'] { --c: var(--tl-purple); }
.tl-sider [data-cat='images'] { --c: var(--tl-orange); }
.tl-sider [data-cat='development'] { --c: var(--tl-green); }
.tl-sider [data-cat='network'] { --c: var(--tl-yellow); }
.tl-sider [data-cat='text'] { --c: var(--tl-red); }
.tl-sider [data-cat] .n-menu-item-content__icon { color: var(--c) !important; opacity: .85; }
.tl-sider [data-cat] .tl-cat-dot { display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-radius: 50%; background: var(--c); vertical-align: middle; }

/* A tool's page: its title underlined in Dracula pink and purple */
#app .tool-layout .tool-header .separator { width: 120px !important; height: 3px !important; border-radius: 3px; opacity: 1 !important; background: linear-gradient(90deg, var(--tl-pink), var(--tl-purple)) !important; }
#app .tool-layout .tool-header .n-h1 { font-family: var(--font-head) !important; font-weight: 700 !important; letter-spacing: -.01em; }

/* ---------- 4. The blog's plain-element rules, undone inside the tools ---------- */
:where(#app, .v-binder-follower-container, .n-modal-container, .n-message-container, .n-notification-container, .n-drawer-container) input,
:where(#app, .v-binder-follower-container, .n-modal-container, .n-message-container, .n-notification-container, .n-drawer-container) textarea,
:where(#app, .v-binder-follower-container, .n-modal-container, .n-message-container, .n-notification-container, .n-drawer-container) select {
  width: revert; min-height: revert; padding: revert; border: revert; border-radius: revert; background: revert; color: revert; font: revert; line-height: revert; box-shadow: revert; transition: revert; appearance: revert;
}
:where(#app, .v-binder-follower-container, .n-modal-container, .n-message-container, .n-notification-container, .n-drawer-container) :is(input, textarea, select):is(:hover, :focus) {
  border-color: revert; box-shadow: revert; outline: revert;
}
:where(#app, .v-binder-follower-container, .n-modal-container, .n-message-container, .n-notification-container, .n-drawer-container) input[type='file'],
:where(#app, .v-binder-follower-container, .n-modal-container, .n-message-container, .n-notification-container, .n-drawer-container) input[type='checkbox'] {
  width: revert; height: revert; min-height: revert; padding: revert; font-size: revert; border-style: revert; accent-color: var(--tl-primary);
}
:where(#app, .v-binder-follower-container, .n-modal-container, .n-message-container, .n-notification-container, .n-drawer-container) label {
  display: revert; gap: revert; font: revert;
}
:where(#app, .v-binder-follower-container, .n-modal-container) h1,
:where(#app, .v-binder-follower-container, .n-modal-container) h2,
:where(#app, .v-binder-follower-container, .n-modal-container) h3 {
  font-family: revert; font-size: revert; font-weight: revert; line-height: revert; letter-spacing: revert; margin: revert;
}
:where(#app, .v-binder-follower-container, .n-modal-container) img { max-width: revert; display: revert; }
:where(#app, .v-binder-follower-container, .n-modal-container) a { text-underline-offset: revert; }