/* ==========================================================================
   CUSTOM STYLES
   Tailwind handles layout/utility classes. This file only holds what
   utilities can't express cleanly:
     0. palette variables
     1. base + background
     2. hero
     3. filter chips + nav links + primary button
     4. rendered markdown ("prose-ctf")
     5. code blocks + syntax-highlighting theme
     6. misc components

   Colors are still CSS custom properties (in "R G B" form, so Tailwind's
   rgb(var(--x) / <alpha-value>) functions in js/tailwind-config.js can
   apply opacity) even though there's only one theme — it keeps every shade
   defined once, in one place, rather than scattered across class names.
   ========================================================================== */

:root {
  --ink-950: 16 16 15;     /* page background */
  --ink-900: 22 22 21;     /* card / surface background */
  --ink-800: 30 30 28;     /* header, footer, code-bar background */
  --ink-700: 42 42 39;     /* default border */
  --ink-600: 58 58 54;     /* secondary border / dots */
  --ink-500: 78 78 73;     /* hover border */

  --fg: 224 219 210;       /* body text */
  --fg-muted: 158 152 142;
  --fg-dim: 110 106 98;
  --heading: 240 236 229;  /* headings / strong text */

  --neon: 168 88 58;       /* primary accent — muted rust */
  --neon-dim: 92 44 26;    /* darker variant (hover/pressed states, gradient dark stop) */
  --cyan: 201 123 82;      /* secondary accent — lighter rust, for two-tone contrast */

  --on-accent: 245 240 234; /* text/icon color placed on top of the accent (rust is mid-tone, so light text wins here, unlike the old purple) */
  --on-accent-btn: 245 240 234;
  --btn-grad-from: 179 90 60;  /* gradient button light stop */

  --selection: 168 88 58;

  /* Code blocks use the same dark palette; kept as separate tokens so a
     future accent change doesn't accidentally alter code readability. */
  --code-bg: 14 13 12;
  --code-bar-bg: 24 22 20;
  --code-border: 38 35 32;
  --code-fg: 224 219 210;
  --code-fg-muted: 158 152 142;
}

/* ---------- 1. base ---------- */
html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; font-size: 87.5%; }

body {
  background-color: rgb(var(--ink-950));
  color: rgb(var(--fg));
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background-color .2s ease, color .2s ease;
}

::selection { background: rgb(var(--selection) / .3); color: rgb(var(--heading)); }

/* visible keyboard focus everywhere */
:focus-visible { outline: 2px solid rgb(var(--cyan)); outline-offset: 2px; border-radius: 4px; }

/* slim scrollbars for code blocks / overflow areas */
* { scrollbar-width: thin; scrollbar-color: rgb(var(--ink-600)) transparent; }

/* ---------- 2. hero (see js/hero-flow.js) ---------- */
.hero-flow { position: relative; overflow: hidden; }
.hero-fx {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent);
          mask-image: linear-gradient(to bottom, #000 78%, transparent);
}
.hero-fx canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-flow > .hero-body { position: relative; z-index: 1; }
/* Daemon + Bolt (js/hero-duo.js): right side of the hero, large screens only */
.hero-duo { display: none; position: absolute; top: 2.25rem; right: 1.25rem; width: clamp(420px, 44vw, 700px); height: 250px; z-index: 1; }
@media (min-width: 1024px) { .hero-duo { display: block; } }
.mascot-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mascot-stage .bub { position: absolute; transform: translate(-50%, -100%); max-width: 200px; padding: 5px 9px 6px; border: .5px solid rgb(var(--cyan)); background: rgb(var(--ink-800)); color: rgb(var(--heading)); font: 11.5px/1.35 "JetBrains Mono", ui-monospace, monospace; border-radius: 6px; opacity: 0; transition: opacity .2s; pointer-events: none; text-align: center; z-index: 2; }
.mascot-stage .bub::before { content: attr(data-who); display: block; font-size: 9px; letter-spacing: .1em; color: rgb(var(--cyan)); text-transform: uppercase; margin-bottom: 2px; }
.mascot-stage .bub::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; background: rgb(var(--ink-800)); border-right: .5px solid rgb(var(--cyan)); border-bottom: .5px solid rgb(var(--cyan)); transform: translateX(-50%) rotate(45deg); }
.mascot-stage .bub.g { border-color: rgb(var(--heading)); }
.mascot-stage .bub.g::before { color: rgb(var(--heading)); }
.mascot-stage .bub.g::after { border-right-color: rgb(var(--heading)); border-bottom-color: rgb(var(--heading)); }
/* About page: Bolt standing beside the heading */
.about-bolt { display: none; position: absolute; top: 0; right: 1.5rem; width: min(380px, 36vw); height: 172px; z-index: 2; }
@media (min-width: 768px) { .about-bolt { display: block; } }
/* the canvas draws the headline; the real <h1> stays for screen readers/SEO */
.motion .hero-flow:not(.flow-off) #hero-title { color: transparent; }

/* ---------- 3. filter chips + nav links + primary button ---------- */
.chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1.1rem;
  font-family: "JetBrains Mono", monospace;
  font-size: .92rem;
  color: rgb(var(--fg-muted));
  border: 1px solid rgb(var(--ink-700));
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  transition: color .15s, border-color .15s, background-color .15s;
}
.chip:hover { color: rgb(var(--fg)); border-color: rgb(var(--ink-500)); }
.chip[aria-pressed="true"] {
  color: rgb(var(--on-accent));
  background: rgb(var(--neon));
  border-color: rgb(var(--neon));
  font-weight: 600;
}

/* Nav bar links + footer social links: a simple underline on hover/focus;
   active page keeps the underline shown. Color change only, no motion. */
.nav-link {
  position: relative;
  display: inline-block;
  transition: color .15s ease;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 2px;
  height: 1px;
  background: rgb(var(--neon));
  opacity: 0;
  transition: opacity .15s ease;
}
.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link[aria-current="page"]::after {
  opacity: 1;
}

/* Primary call-to-action button: solid fill, no glow shadow. */
.btn-glow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: 6px;
  color: rgb(var(--on-accent-btn));
  background: rgb(var(--neon));
  transition: background-color .15s ease;
}
.btn-glow:hover { background: rgb(var(--neon-dim)); }

/* ---------- 4. rendered markdown ---------- */
.prose-ctf { max-width: 96ch; font-size: 1.1rem; line-height: 1.8; color: rgb(var(--fg)); }
.prose-ctf > * + * { margin-top: 1.1rem; }

.prose-ctf h2,
.prose-ctf h3,
.prose-ctf h4 {
  font-family: "JetBrains Mono", monospace;
  color: rgb(var(--heading));
  line-height: 1.3;
  scroll-margin-top: 5.5rem;
}
.prose-ctf h2 {
  font-size: 1.5rem; font-weight: 700;
  margin-top: 3rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid rgb(var(--ink-700));
}
.prose-ctf h2::before { content: "## "; color: rgb(var(--neon)); font-weight: 500; }
.prose-ctf h3 { font-size: 1.15rem; font-weight: 600; margin-top: 2rem; }
.prose-ctf h3::before { content: "### "; color: rgb(var(--cyan)); font-weight: 500; }
.prose-ctf h4 { font-size: 1rem; font-weight: 600; margin-top: 1.5rem; }

.prose-ctf a { color: rgb(var(--cyan)); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgb(var(--cyan) / .35); }
.prose-ctf a:hover { text-decoration-color: rgb(var(--cyan)); }

.prose-ctf strong { color: rgb(var(--heading)); font-weight: 600; }
.prose-ctf em { color: rgb(var(--fg)); }

.prose-ctf ul, .prose-ctf ol { padding-left: 1.4rem; }
.prose-ctf ul { list-style: none; }
.prose-ctf ul > li { position: relative; }
.prose-ctf ul > li::before {
  content: "-"; position: absolute; left: -1.1rem;
  font-family: "JetBrains Mono", monospace; color: rgb(var(--cyan));
}
.prose-ctf ol { list-style: decimal; }
.prose-ctf ol > li::marker { color: rgb(var(--cyan)); font-family: "JetBrains Mono", monospace; }
.prose-ctf li + li { margin-top: .35rem; }

/* inline code */
.prose-ctf :not(pre) > code {
  font-family: "JetBrains Mono", monospace;
  font-size: .86em;
  padding: .15em .4em;
  border-radius: 4px;
  color: rgb(var(--cyan));
  background: rgb(var(--cyan) / .08);
  border: 1px solid rgb(var(--cyan) / .15);
}

/* blockquote doubles as a callout: use > **Note:** ... in markdown */
.prose-ctf blockquote {
  padding: .85rem 1.1rem;
  border-left: 3px solid rgb(var(--cyan));
  background: rgb(var(--cyan) / .07);
  border-radius: 0 8px 8px 0;
  color: rgb(var(--fg));
}
.prose-ctf blockquote > * + * { margin-top: .5rem; }

.prose-ctf hr { border: 0; border-top: 1px solid rgb(var(--ink-700)); margin: 2.5rem 0; }

.prose-ctf figure.img-frame {
  display: inline-block; max-width: 100%;
  border: 1px solid rgb(var(--code-border));
  border-radius: 10px;
  overflow: hidden;
  background: rgb(var(--code-bg));
  margin: 1.75rem 0;
  box-shadow: 0 1px 0 rgb(var(--ink-950) / .04);
}
.prose-ctf figure.img-frame img { display: block; max-width: 100%; height: auto; }

.prose-ctf table { width: 100%; border-collapse: collapse; font-size: .92rem; display: block; overflow-x: auto; }
.prose-ctf th, .prose-ctf td { padding: .5rem .8rem; border: 1px solid rgb(var(--ink-700)); text-align: left; }
.prose-ctf th { background: rgb(var(--ink-800)); color: rgb(var(--heading)); font-family: "JetBrains Mono", monospace; font-weight: 600; }

/* ---------- 5. code blocks (always dark, see note at top of file) ---------- */
/* markup is built in main.js: .codeblock > .codeblock-bar + pre > code */
.codeblock {
  border: 1px solid rgb(var(--code-border));
  border-radius: 10px;
  overflow: hidden;
  background: rgb(var(--code-bg));
  margin-top: 1.25rem;
  box-shadow: 0 1px 0 rgb(var(--ink-950) / .04);
}
.codeblock-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .6rem .7rem .6rem 1.1rem;
  background: rgb(var(--code-bar-bg));
  border-bottom: 1px solid rgb(var(--code-border));
  font-family: "JetBrains Mono", monospace;
  font-size: .85rem;
  color: rgb(var(--code-fg-muted));
}
.codeblock-bar .dots { display: inline-flex; gap: 6px; margin-right: .7rem; }
.codeblock-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: rgb(var(--ink-600)); display: block; }
.codeblock-bar button {
  font: inherit; color: rgb(var(--code-fg-muted)); background: transparent;
  border: 1px solid rgb(var(--ink-600)); border-radius: 6px;
  padding: .3rem .8rem; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.codeblock-bar button:hover { color: rgb(var(--cyan)); border-color: rgb(var(--cyan)); }
.codeblock-bar button[data-copied="true"] { color: rgb(var(--cyan)); border-color: rgb(var(--cyan)); }

.codeblock pre { margin: 0; padding: 1.2rem 1.3rem; overflow-x: auto; }
.codeblock pre code {
  font-family: "JetBrains Mono", monospace;
  font-size: .94rem; line-height: 1.7;
  color: rgb(var(--code-fg));
  background: none; border: 0; padding: 0;
  white-space: pre;
}

/* highlight.js theme: neon/cyan on ink (fixed values — code blocks don't reflow with light mode) */
.hljs-comment, .hljs-quote                      { color: #8a8278; font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-built_in,
.hljs-doctag, .hljs-type                        { color: #e0a458; }
.hljs-string, .hljs-regexp, .hljs-addition      { color: #39ff9f; }
.hljs-number, .hljs-literal, .hljs-symbol,
.hljs-bullet                                    { color: #ffb86b; }
.hljs-title, .hljs-title.function_, .hljs-section { color: #ffe27a; }
.hljs-attr, .hljs-attribute, .hljs-variable,
.hljs-template-variable, .hljs-params           { color: #c9a7ff; }
.hljs-meta, .hljs-name                          { color: #ff7ab8; }
.hljs-deletion                                  { color: #ff6b6b; }
.hljs-emphasis { font-style: italic; }
.hljs-strong   { font-weight: 700; }

/* ---------- 6. misc components ---------- */
/* Card hover state: border color change only — no cursor tracking, no shadow. */
.card-hover { transition: border-color .15s ease; }

/* custom dropdown (js/ui-extras.js) — replaces the native <select data-dd> popup */
.dd { position: relative; }
.dd-native { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.dd-btn {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  width: 100%; min-width: calc(14ch + 3rem); border-radius: 6px;
  border: 1px solid rgb(var(--ink-700));
  background: rgb(var(--ink-900));
  padding: .875rem 1rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 1rem;
  color: rgb(var(--fg));
  cursor: pointer;
  transition: border-color .15s ease;
}
.dd-btn:hover { border-color: rgb(var(--ink-500)); }
.dd-btn:focus-visible { outline: 2px solid rgb(var(--cyan)); outline-offset: 2px; }
.dd-btn[aria-expanded="true"] { border-color: rgb(var(--neon)); }
.dd-arrow { color: rgb(var(--fg-dim)); font-size: .8rem; transition: transform .15s ease, color .15s ease; }
.dd-btn[aria-expanded="true"] .dd-arrow { transform: rotate(180deg); color: rgb(var(--cyan)); }
.dd-list {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px);
  margin: 0; padding: .35rem; list-style: none;
  border-radius: 8px;
  border: 1px solid rgb(var(--ink-700));
  background: rgb(var(--ink-900));
  box-shadow: 0 12px 28px -8px rgb(0 0 0 / .55);
  max-height: 16rem; overflow-y: auto;
}
.dd-opt {
  padding: .6rem .8rem; border-radius: 5px;
  font-family: "JetBrains Mono", monospace;
  font-size: .95rem;
  color: rgb(var(--fg-muted));
  cursor: pointer;
  transition: background-color .1s ease, color .1s ease;
}
.dd-opt:hover, .dd-opt:focus { background: rgb(var(--neon) / .14); color: rgb(var(--heading)); outline: none; }
.dd-opt[aria-selected="true"] { color: rgb(var(--on-accent)); background: rgb(var(--neon)); font-weight: 600; }
.toc-link { border-left: 2px solid rgb(var(--ink-700)); transition: color .15s, border-color .15s; }
.toc-link:hover { color: rgb(var(--fg)); }
.toc-link[aria-current="true"] { color: rgb(var(--cyan)); border-left-color: rgb(var(--cyan)); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; }
  .brand-mark *, .flag-shake, .flag-tick path, .flag-ok { animation: none !important; }
  #read-progress { display: none; }
}


/* ---------- 7. motion: reveals, logo, flag feedback ----------
   Reveals are hidden only under <html class="motion"> (set in <head> unless the
   visitor prefers reduced motion), and shown by adding .in (js/motion.js). */
.motion [data-rv="head"] { overflow: hidden; padding-bottom: .16em; margin-bottom: -.16em; }
.motion [data-rv="head"] > .rv-in { display: block; transform: translateY(112%); }
.motion [data-rv="head"].in > .rv-in { transform: none; transition: transform .85s cubic-bezier(.2,.8,.2,1) var(--rv-d, 0s); }

.motion .rv-w { display: inline-block; opacity: 0; transform: translateY(5px); }
.motion .in .rv-w {
  opacity: 1; transform: none;
  transition: opacity .5s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.2,.8,.2,1);
  transition-delay: calc(var(--rv-d, 0s) + var(--i) * var(--st, 14ms));
}

.motion [data-rv="fade"] { opacity: 0; transform: translateY(8px); }
.motion [data-rv="fade"].in { opacity: 1; transform: none; transition: opacity .6s ease var(--rv-d, 0s), transform .6s cubic-bezier(.2,.8,.2,1) var(--rv-d, 0s); }

.motion [data-rv="pop"] { opacity: 0; transform: scale(.9); }
.motion [data-rv="pop"].in { opacity: 1; transform: none; transition: opacity .4s ease var(--rv-d, 0s), transform .45s cubic-bezier(.2,1.4,.4,1) var(--rv-d, 0s); }

.motion [data-rv="box"] { opacity: 0; }
.motion [data-rv="box"] > * { opacity: 0; }
.motion [data-rv="box"].in {
  opacity: 1;
  animation: rv-wipe .75s cubic-bezier(.6,0,.2,1) var(--rv-d, 0s) both, rv-flash 1.1s ease-out var(--rv-d, 0s);
}
.motion [data-rv="box"].in > * { opacity: 1; transition: opacity .5s ease calc(var(--rv-d, 0s) + .4s); }
@keyframes rv-wipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(-24px); } }
@keyframes rv-flash { from { border-color: rgb(var(--cyan)); } }

.motion [data-rv="develop"] { opacity: 0; filter: brightness(2) blur(5px); }
.motion [data-rv="develop"].in { opacity: 1; filter: none; transition: opacity 1s ease, filter 1.1s ease; }

/* header/footer logo: the favicon mark. The prompt and cursor draw in once; the cursor blinks on hover. */
.brand-mark { width: 2rem; height: 2rem; flex: none; }
.brand-mark.brand-sm { width: 1.5rem; height: 1.5rem; }
.brand-mark .bm-bg { fill: rgb(var(--ink-800)); stroke: rgb(var(--ink-600)); stroke-width: 1; }
.brand-mark .bm-fg { fill: none; stroke: rgb(var(--neon)); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.brand-mark .bm-gt { stroke-dasharray: 20; animation: bm-gt .5s cubic-bezier(.6,0,.2,1) .15s backwards; }
.brand-mark .bm-us { stroke-dasharray: 10; animation: bm-us .35s cubic-bezier(.6,0,.2,1) .55s backwards; }
@keyframes bm-gt { from { stroke-dashoffset: 20; } }
@keyframes bm-us { from { stroke-dashoffset: 10; } }
a:hover .brand-mark:not(.brand-sm) .bm-us { animation: bm-blink 1s steps(1) infinite; }
@keyframes bm-blink { 50% { opacity: 0; } }
.brand-mark.brand-sm * { animation: none; }

/* flag check feedback */
.flag-shake { animation: flag-shake .4s; }
@keyframes flag-shake { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
.flag-tick { display: inline-block; width: 1em; height: 1em; vertical-align: -.12em; margin-left: .25rem; }
.flag-tick path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; animation: tick-draw .5s cubic-bezier(.6,0,.2,1) backwards; }
@keyframes tick-draw { from { stroke-dashoffset: 24; } }
.flag-ok, .motion [data-rv="box"].flag-ok { animation: flag-ok 1s ease-out; }
@keyframes flag-ok { from { box-shadow: inset 0 0 0 1px rgb(var(--cyan)), inset 0 0 28px rgb(var(--cyan) / .18); border-color: rgb(var(--cyan)); } }

/* write-up reading progress */
#read-progress { position: fixed; top: 0; left: 0; width: 100%; height: 2px; transform: scaleX(0); transform-origin: left; background: rgb(var(--cyan)); z-index: 60; pointer-events: none; }