joelhooks__joelclaw/apps/web/app/globals.css

@import "tailwindcss";
@source "../../packages/ui/src/**/*.tsx";
@source "../../packages/ui/src/**/*.ts";
@import "tw-animate-css";
@import "shadcn/tailwind.css";



@custom-variant dark (&:is(.dark *));

@theme {
  --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
  --font-mono: var(--font-geist-mono), ui-monospace, monospace;
  --font-code: var(--font-dank-mono), var(--font-geist-mono), ui-monospace, monospace;
  --font-pixel: var(--font-geist-pixel-square), monospace;
  --color-claw: #ff1493;
}

/* ── Search dialog + Mobile nav ─────────────────────────────── */

@keyframes search-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes search-panel-in {
  from { opacity: 0; transform: scale(0.96) translateY(-8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes mobile-nav-link-in {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}

.search-overlay {
  background: rgba(10, 10, 10, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: search-overlay-in 120ms ease-out;
}

.search-panel {
  animation: search-panel-in 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes mobile-nav-overlay-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes mobile-nav-link-out {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(8px); }
}

.mobile-nav-overlay {
  animation: search-overlay-in 150ms ease-out;
}

.mobile-nav-overlay-exit {
  animation: mobile-nav-overlay-out 150ms ease-in forwards;
}

.mobile-nav-link {
  opacity: 0;
  animation: mobile-nav-link-in 200ms ease-out forwards;
}

.mobile-nav-link-exit {
  animation: mobile-nav-link-out 120ms ease-in forwards;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav-overlay,
  .mobile-nav-overlay-exit,
  .mobile-nav-link,
  .mobile-nav-link-exit {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Pagefind excerpt highlighting */
.search-excerpt mark {
  background: transparent;
  color: #ff1493;
  font-weight: 500;
}

/* ── Global scrollbar — dark, thin, unobtrusive ─────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: #262626 transparent;
}

*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: #262626;
  border-radius: 3px;
}

*::-webkit-scrollbar-thumb:hover {
  background: #404040;
}

/* Utility override for extra-thin scrollbar */
.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: #404040 transparent;
}

.scrollbar-thin::-webkit-scrollbar {
  width: 4px;
}

.scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  background: #404040;
  border-radius: 2px;
}

/* Code blocks — Dank Mono + Catppuccin Mocha */
[data-rehype-pretty-code-figure] {
  @apply my-6;
}

[data-rehype-pretty-code-title] {
  @apply rounded-t-lg border border-b-0 border-neutral-800 bg-neutral-900/80 px-4 py-2 text-[11px] font-medium uppercase tracking-wider text-neutral-400;
}

[data-rehype-pretty-code-figure] pre {
  @apply rounded-lg border border-neutral-800 px-4 py-3 text-sm leading-relaxed shadow-[inset_0_1px_0_rgba(255,255,255,0.03)];
  font-family: var(--font-code);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}

[data-rehype-pretty-code-title] + pre {
  @apply rounded-t-none;
}

[data-rehype-pretty-code-figure] code {
  font-family: var(--font-code);
  font-variant-ligatures: contextual;
}

/* Apply token colors emitted by rehype-pretty-code/Shiki */
[data-rehype-pretty-code-figure] [style*="--shiki-light"] {
  color: var(--shiki-light);
}

html.dark [data-rehype-pretty-code-figure] [style*="--shiki-dark"] {
  color: var(--shiki-dark);
}

[data-rehype-pretty-code-figure] [style*="--shiki-light-font-style"] {
  font-style: var(--shiki-light-font-style);
  font-weight: var(--shiki-light-font-weight, inherit);
  text-decoration: var(--shiki-light-text-decoration, none);
}

html.dark [data-rehype-pretty-code-figure] [style*="--shiki-dark-font-style"] {
  font-style: var(--shiki-dark-font-style);
  font-weight: var(--shiki-dark-font-weight, inherit);
  text-decoration: var(--shiki-dark-text-decoration, none);
}

[data-rehype-pretty-code-figure] pre {
  background-color: var(--shiki-light-bg, #1f1f1f) !important;
}

html.dark [data-rehype-pretty-code-figure] pre {
  background-color: var(--shiki-dark-bg, #1f1f1f) !important;
}

[data-rehype-pretty-code-figure] [data-line] {
  @apply px-4 -mx-4;
}

[data-rehype-pretty-code-figure] [data-highlighted-line] {
  @apply bg-white/5 border-l-2 border-claw;
}

[data-rehype-pretty-code-caption] {
  @apply rounded-b-lg border border-t-0 border-neutral-800 bg-neutral-900/50 px-4 py-2 text-xs text-neutral-500;
}

/* Custom scrollbars for code blocks */
[data-rehype-pretty-code-figure] pre {
  scrollbar-width: thin;
  scrollbar-color: #404040 transparent;
}

[data-rehype-pretty-code-figure] pre::-webkit-scrollbar {
  height: 6px;
}

[data-rehype-pretty-code-figure] pre::-webkit-scrollbar-track {
  background: transparent;
}

[data-rehype-pretty-code-figure] pre::-webkit-scrollbar-thumb {
  background: #404040;
  border-radius: 3px;
}

[data-rehype-pretty-code-figure] pre::-webkit-scrollbar-thumb:hover {
  background: #525252;
}

/* Inline code */
:not(pre) > code {
  font-family: var(--font-code);
  @apply text-sm bg-neutral-800/60 rounded px-1.5 py-0.5 text-claw;
}

/* ── Tufte-style sidenotes ──────────────────────────────────────
 * Credit: Edward Tufte / Tufte-CSS (https://edwardtufte.github.io/tufte-css/)
 * Adapted for dark theme + Tailwind v4. Pure CSS, no JS.
 * ──────────────────────────────────────────────────────────────── */

/* Article wrapper — reset sidenote counter, allow margin overflow */
.prose-joelclaw {
  counter-reset: sidenote-counter;
  overflow: visible;
}

/* Prevent wide children from causing horizontal page scroll on mobile */
.prose-joelclaw pre,
.prose-joelclaw table,
.prose-joelclaw iframe,
.prose-joelclaw img,
.prose-joelclaw video {
  max-width: 100%;
}
.prose-joelclaw table {
  display: block;
  overflow-x: auto;
}

input.margin-toggle {
  display: none;
}

.sidenote-number {
  counter-increment: sidenote-counter;
  cursor: default;
}

.sidenote-number::after,
.sidenote::before {
  position: relative;
  vertical-align: baseline;
}

/* Superscript number in body text */
.sidenote-number::after {
  content: counter(sidenote-counter);
  font-size: 0.7rem;
  top: -0.5rem;
  left: 0.1rem;
  color: #a3a3a3;
}

/* Matching number in the sidenote itself */
.sidenote::before {
  content: counter(sidenote-counter) " ";
  font-size: 0.7rem;
  top: -0.5rem;
  color: #a3a3a3;
}

/* Desktop: float into right margin */
.sidenote,
.marginnote {
  float: right;
  clear: right;
  margin-right: -55%;
  width: 45%;
  margin-top: 0.3rem;
  margin-bottom: 1rem;
  font-size: 0.8rem;
  line-height: 1.4;
  color: #a3a3a3;
  position: relative;
}

.marginnote {
  /* No number for margin notes */
}

/* ⊕ toggle for margin notes */
label.margin-toggle:not(.sidenote-number) {
  display: none;
}

/* Mobile: collapse behind toggle */
@media (max-width: 900px) {
  label.margin-toggle:not(.sidenote-number) {
    display: inline;
    cursor: pointer;
    color: #a3a3a3;
  }

  .sidenote,
  .marginnote {
    display: none;
  }

  .margin-toggle:checked + .sidenote,
  .margin-toggle:checked + .marginnote {
    display: block;
    float: left;
    clear: both;
    width: 95%;
    margin: 1rem 2.5%;
    padding: 0.75rem 1rem;
    background: #171717;
    border-left: 2px solid #404040;
    border-radius: 0 0.375rem 0.375rem 0;
  }
}

/* ── Vault prose — pre-rendered markdown viewer ──────────────── */

.vault-prose {
  @apply font-mono text-sm leading-[1.8] text-neutral-300;
}

.vault-prose h1 {
  @apply mt-6 mb-3 text-lg font-semibold text-neutral-100;
}
.vault-prose h2 {
  @apply mt-5 mb-2 text-base font-semibold text-neutral-100 border-b border-neutral-800/40 pb-1;
}
.vault-prose h3 {
  @apply mt-4 mb-2 text-sm font-semibold text-neutral-200;
}
.vault-prose h4, .vault-prose h5, .vault-prose h6 {
  @apply mt-3 mb-1 text-sm font-medium text-neutral-300;
}

.vault-prose p {
  @apply mb-3;
}

.vault-prose a {
  @apply text-claw/80 underline decoration-claw/30 underline-offset-2 transition-colors hover:text-claw hover:decoration-claw/60;
}

.vault-prose strong {
  @apply font-semibold text-neutral-100;
}

.vault-prose em {
  @apply italic text-neutral-400;
}

.vault-prose ul {
  @apply mb-3 ml-4 list-disc;
}
.vault-prose ol {
  @apply mb-3 ml-4 list-decimal;
}
.vault-prose li {
  @apply mb-1;
}
.vault-prose li > ul, .vault-prose li > ol {
  @apply mt-1 mb-0;
}

.vault-prose code {
  @apply rounded bg-neutral-800/60 px-1.5 py-0.5 text-[12px] text-claw/80;
}

.vault-prose pre {
  @apply mb-3 overflow-x-auto rounded-lg border border-neutral-800/50 bg-neutral-950 p-3;
}
.vault-prose pre code {
  @apply bg-transparent p-0 text-neutral-300;
}

/* Shiki / rehype-pretty-code */
.vault-prose figure[data-rehype-pretty-code-figure] {
  @apply mb-3;
}
.vault-prose figure[data-rehype-pretty-code-figure] pre {
  @apply mb-0;
}
.vault-prose figure[data-rehype-pretty-code-figure] figcaption {
  @apply rounded-t-lg border border-b-0 border-neutral-800/50 bg-neutral-900/80 px-3 py-1.5 font-pixel text-[10px] uppercase tracking-wider text-neutral-500;
}
.vault-prose figure[data-rehype-pretty-code-figure] figcaption + pre {
  @apply rounded-t-none;
}
.vault-prose [data-rehype-pretty-code-figure] code {
  counter-reset: line;
}
.vault-prose [data-rehype-pretty-code-figure] code > [data-line]::before {
  counter-increment: line;
  content: counter(line);
  @apply mr-4 inline-block w-4 text-right text-neutral-700;
}
.vault-prose [data-highlighted-line] {
  @apply -mx-3 border-l-2 border-claw/40 bg-claw/5 px-3;
}
.vault-prose [data-highlighted-chars] {
  @apply rounded bg-claw/15 px-1;
}

.vault-prose blockquote {
  @apply mb-3 border-l-2 border-neutral-700/60 pl-3 text-neutral-400 italic;
}

.vault-prose table {
  @apply mb-3 w-full border-collapse text-[12px];
}
.vault-prose th {
  @apply border border-neutral-800/50 bg-neutral-900/50 px-2 py-1 text-left font-medium text-neutral-300;
}
.vault-prose td {
  @apply border border-neutral-800/30 px-2 py-1 text-neutral-400;
}

.vault-prose hr {
  @apply my-4 border-neutral-800/40;
}

.vault-prose img {
  @apply my-3 rounded-lg border border-neutral-800/30;
}

/* Obsidian callouts */
.vault-prose .callout {
  @apply mb-3 rounded-lg border border-neutral-700/40 bg-neutral-900/30 p-3;
}
.vault-prose .callout-title {
  @apply mb-1 font-semibold text-neutral-200;
}
.vault-prose .callout-info { @apply border-l-2 border-l-blue-500/60; }
.vault-prose .callout-warning { @apply border-l-2 border-l-amber-500/60; }
.vault-prose .callout-danger, .vault-prose .callout-error { @apply border-l-2 border-l-red-500/60; }
.vault-prose .callout-tip { @apply border-l-2 border-l-emerald-500/60; }
.vault-prose .callout-note { @apply border-l-2 border-l-purple-500/60; }
.vault-prose .callout-example { @apply border-l-2 border-l-cyan-500/60; }

/* Unresolved wikilinks */
.vault-prose .wikilink-unresolved {
  @apply rounded bg-neutral-800/40 px-1 py-0.5 text-neutral-500;
}

/* Foldable callouts (details/summary) */
.vault-prose details.callout summary {
  @apply cursor-pointer font-semibold text-neutral-200;
}

@theme inline {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);
  --radius-4xl: calc(var(--radius) + 16px);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}