/*
 * The IP site's own styles, loaded after the app's and the blog's.
 *
 * 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 palette applies, so the header
 *    and footer look exactly as on the blog.
 * 2. The page: the header and footer as on the blog, the app in the blog's column.
 * 3. The app in Dracula (Alucard in light mode): its color tokens.
 * 4. The blog's stylesheet is loaded into a cascade layer, "blog", between the app's base styles and
 *    its utilities (server.mjs). Its rules for plain elements (h1, p, a, input, button…) are for
 *    the blog's own pages: inside the app and its pop-ups they're undone here, in that same layer,
 *    so the app looks as it was made to.
 */

/* ---------- 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;
  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;
    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;
  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;
}

/* ---------- 2. The 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, the footer runs full width. Their font is the blog's. */
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, the header's width), and the app's sections fill it edge to edge */
.ip-main { max-width: 1120px; min-height: 70vh; margin: 0 auto; padding: 0 16px 24px; }
@media (min-width: 720px) { .ip-main { padding: 0 32px 24px; } }
.ip-main .jn-container { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; }
/* The same on a tool's page, Privacy and a shared report */
#app main.mx-auto, #app main > .mx-auto:first-child { padding-left: 0 !important; padding-right: 0 !important; }
.ip-skip { position: absolute; left: -9999px; top: 8px; z-index: 1000; padding: 8px 14px; border-radius: 8px; background: var(--primary); color: var(--primary-foreground); }
.ip-skip:focus { left: 8px; }

/* The app's text: the blog's interface font, the app's colors (inside the app and its pop-ups, which
   the app puts at the end of the page). In the base layer, so the app's own classes still win. */
@layer base {
  :is(#app, body > [data-slot], body > [data-vaul-drawer], body > [data-reka-popper-content-wrapper]) {
    font-family: var(--font-ui); color: var(--foreground); font-size: 1rem; line-height: 1.5;
  }
}

/* The section menu under the blog's header: no bar of its own, the blog's page shows through */
.ip-subnav { background: transparent !important; backdrop-filter: none !important; border-color: var(--border) !important; margin-bottom: 8px; }
.ip-subnav > nav { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; }
.ip-brand { font: 700 1.15rem/1 var(--font-head); letter-spacing: -.01em;
  background: linear-gradient(90deg, var(--ip-pink), var(--ip-purple)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* The line under the app: where it comes from, its source */
.ip-credit { margin: 32px 0 0; padding-top: 16px; border-top: 1px solid var(--border); text-align: center; font-size: .85rem; color: var(--muted-foreground); }
.ip-credit a { color: var(--ip-purple); text-decoration: none; }
.ip-credit a:hover { text-decoration: underline; }
.ip-credit span { margin: 0 6px; }

/* ---------- 3. Dracula ---------- */
html:root {
  --ip-purple: #644ac9; --ip-pink: #a3144d; --ip-cyan: #036a96; --ip-green: #14710a; --ip-orange: #a34d14; --ip-yellow: #846e15; --ip-red: #cb3a2a;
  --background: #fffbeb; --foreground: #1f1f1f;
  --ip-card: #fffbeb; --card-foreground: #1f1f1f;
  --popover: #fffbeb; --popover-foreground: #1f1f1f;
  --primary: #644ac9; --primary-foreground: #fffbeb;
  --secondary: #efebd6; --secondary-foreground: #1f1f1f;
  --muted: #efebd6; --muted-foreground: #6c664b;
  --ip-accent: #e4dfc6; --accent-foreground: #1f1f1f;
  --destructive: #cb3a2a; --destructive-foreground: #fffbeb;
  --info: #036a96; --info-foreground: #fffbeb;
  --success: #14710a; --success-foreground: #fffbeb;
  --warning: #a34d14; --warning-foreground: #fffbeb;
  --action: #644ac9; --action-foreground: #fffbeb;
  --border: #ddd8c0; --input: #ddd8c0; --ring: #644ac9;
  --page-bg: #f7f3df;
  --radius: .75rem;
}
html.dark {
  --ip-purple: #bd93f9; --ip-pink: #ff79c6; --ip-cyan: #8be9fd; --ip-green: #50fa7b; --ip-orange: #ffb86c; --ip-yellow: #f1fa8c; --ip-red: #ff5555;
  --background: #1c1d26; --foreground: #f8f8f2;
  --ip-card: #1c1d26; --card-foreground: #f8f8f2;
  --popover: #1c1d26; --popover-foreground: #f8f8f2;
  --primary: #bd93f9; --primary-foreground: #14151c;
  --secondary: #262833; --secondary-foreground: #f8f8f2;
  --muted: #262833; --muted-foreground: #a7aed3;
  --ip-accent: #343746; --accent-foreground: #f8f8f2;
  --destructive: #ff5555; --destructive-foreground: #14151c;
  --info: #8be9fd; --info-foreground: #14151c;
  --success: #50fa7b; --success-foreground: #14151c;
  --warning: #ffb86c; --warning-foreground: #14151c;
  --action: #bd93f9; --action-foreground: #14151c;
  --border: #2c2e3b; --input: #343746; --ring: #bd93f9;
  --page-bg: #14151c;
}
/* Cards: the app's soft gray edge and shadow, in Dracula; a purple glow on the one you point at */
#app .jn-card { border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); transition: border-color .2s, box-shadow .2s; }
#app .jn-card:hover { border-color: color-mix(in srgb, var(--ip-purple) 45%, var(--border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ip-purple) 20%, transparent), 0 10px 30px -12px color-mix(in srgb, var(--ip-purple) 45%, transparent); }
#app .jn-card.keyboard-hover { border-color: var(--ip-purple); outline-color: color-mix(in srgb, var(--ip-purple) 50%, transparent); }
/* Section headings in the blog's display font */
#app h2, #app h3 { font-family: var(--font-head); letter-spacing: -.01em; }
#app ::selection, [data-slot] ::selection { background: color-mix(in srgb, var(--ip-purple) 28%, transparent); }

/* Scrollbars inside the app (tables, code, lists, dialogs): Dracula purple. The page's own scrollbar is the blog's. */
:root { --ip-scroll: rgba(100, 74, 201, .40); --ip-scroll-hover: #644ac9; }
:root.dark { --ip-scroll: rgba(189, 147, 249, .45); --ip-scroll-hover: #bd93f9; }
:is(#app, [data-slot], [data-vaul-drawer]) * { scrollbar-width: thin; scrollbar-color: var(--ip-scroll) transparent; }
:is(#app, [data-slot], [data-vaul-drawer]) *::-webkit-scrollbar { width: 8px; height: 8px; }
:is(#app, [data-slot], [data-vaul-drawer]) *::-webkit-scrollbar-track { background: transparent; }
:is(#app, [data-slot], [data-vaul-drawer]) *::-webkit-scrollbar-thumb { background: var(--ip-scroll); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
:is(#app, [data-slot], [data-vaul-drawer]) *::-webkit-scrollbar-thumb:hover { background-color: var(--ip-scroll-hover); }

/* ---------- 4. The blog's element rules, undone inside the app ---------- */
@layer blog {
  :is(#app, [data-slot], [data-sonner-toaster], [data-vaul-drawer], [data-vaul-overlay], [data-reka-popper-content-wrapper]),
  :is(#app, [data-slot], [data-sonner-toaster], [data-vaul-drawer], [data-vaul-overlay], [data-reka-popper-content-wrapper]) *,
  :is(#app, [data-slot], [data-sonner-toaster], [data-vaul-drawer], [data-vaul-overlay], [data-reka-popper-content-wrapper]) *::before,
  :is(#app, [data-slot], [data-sonner-toaster], [data-vaul-drawer], [data-vaul-overlay], [data-reka-popper-content-wrapper]) *::after {
    all: revert-layer;
  }
}