/* ── Tailwind v4 ─────────────────────────────────────────────────────────────
 *
 * @import "tailwindcss" replaces the three v3 directives (@tailwind base /
 * components / utilities). Theme tokens (fonts, colours, spacing, etc.) live
 * here in @theme instead of in a JS config file.
 *
 * @layer base and @apply are still valid in v4 — they compile to the same
 * cascade layer machinery.
 * ─────────────────────────────────────────────────────────────────────────── */
@import "tailwindcss";

/* Use .dark class on <html> instead of the OS media query */
@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-display: "Playfair Display", Georgia, serif;
}

html,
body {
  @apply bg-stone-50 dark:bg-stone-950;
}

html.dark {
  color-scheme: dark;
}

/* ── Base element resets ─────────────────────────────────────────────────────
 *
 * Tailwind's preflight (included via @import "tailwindcss") strips browser
 * default styles from headings, paragraphs, lists, etc. These rules restore
 * sensible typographic defaults so that CMS-rendered or third-party HTML looks
 * right without requiring utility classes on every element.
 *
 * Placed in @layer base so Tailwind utility classes can override them when
 * needed.
 * ─────────────────────────────────────────────────────────────────────────── */
@layer base {
  h1 { @apply text-2xl font-bold mb-4; }
  h2 { @apply text-xl font-semibold mb-3; }
  h3 { @apply text-lg font-medium mb-2; }
  h4 { @apply text-base font-medium mb-2; }
  h5 { @apply text-sm font-medium mb-1; }
  h6 { @apply text-xs font-medium mb-1; }
  p  { @apply mb-4; }
  section, article { @apply mb-6; }
  ul, ol { @apply mb-4 ml-6; }
  ul { @apply list-disc; }
  ol { @apply list-decimal; }
  li { @apply mb-1; }
  blockquote { @apply border-l-4 border-gray-300 pl-4 italic mb-4; }
  hr { @apply border-gray-300 mb-4; }
}

/* ── Prose styles for markdown preview content ───────────────────────────────
 *
 * Applied to the container div rendered by PreviewRenderer. These rules use
 * plain CSS (not @apply) because they target HTML emitted by the markdown
 * pipeline — we don't control the markup, so scoping by class is the right
 * boundary. The .prose-styles wrapper keeps them from leaking into the rest of
 * the app's UI.
 *
 * Dark-mode overrides for prose follow in the @media block below.
 * ─────────────────────────────────────────────────────────────────────────── */

.prose-styles h1 { font-size: 2.25rem; font-weight: 800; margin-bottom: 1rem; margin-top: 2rem; }
.prose-styles h2 { font-size: 1.875rem; font-weight: 700; margin-bottom: 0.75rem; margin-top: 1.5rem; }
.prose-styles h3 { font-size: 1.5rem; font-weight: 600; margin-bottom: 0.5rem; margin-top: 1.25rem; }
.prose-styles h4 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; margin-top: 1rem; }
.prose-styles h5 { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.5rem; margin-top: 0.75rem; }
.prose-styles h6 { font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; margin-top: 0.75rem; }
.prose-styles p { margin-bottom: 1rem; line-height: 1.7; }
.prose-styles strong { font-weight: 600; }
.prose-styles em { font-style: italic; }
.prose-styles code { background: #f3f4f6; padding: 0.125rem 0.25rem; border-radius: 0.25rem; font-family: 'Courier New', monospace; font-size: 0.875rem; }
.prose-styles pre {
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 1rem 0;
  border: 1px solid #e5e7eb;
}
.prose-styles pre code { background: transparent; padding: 0; }
.prose-styles blockquote { border-left: 4px solid #e5e7eb; padding-left: 1rem; margin: 1rem 0; font-style: italic; color: #6b7280; }
.prose-styles ul { list-style-type: disc; padding-left: 1.5rem; margin: 1rem 0; }
.prose-styles ol { list-style-type: decimal; padding-left: 1.5rem; margin: 1rem 0; }
.prose-styles li { margin-bottom: 0.5rem; }
.prose-styles a { color: #3b82f6; text-decoration: underline; }
.prose-styles a:hover { color: #1d4ed8; }
.prose-styles a[href^="https://bsky.app/profile/"],
.prose-styles a[href^="https://bsky.app/hashtag/"],
.prose-styles a[href^="https://finance.yahoo.com/quote/"] { text-decoration: none; }
.prose-styles a[href^="https://bsky.app/profile/"]:hover,
.prose-styles a[href^="https://bsky.app/hashtag/"]:hover,
.prose-styles a[href^="https://finance.yahoo.com/quote/"]:hover { text-decoration: underline; }
.prose-styles table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.prose-styles th, .prose-styles td { border: 1px solid #e5e7eb; padding: 0.5rem; text-align: left; }
.prose-styles th { background: #f9fafb; font-weight: 600; }
.prose-styles img { max-width: 100%; height: auto; margin: 1rem 0; }
.prose-styles hr { border: none; border-top: 1px solid #e5e7eb; margin: 2rem 0; }
.prose-styles .katex { display: inline; font-size: 1em; }

/* rehype-pretty-code sets data-theme on <pre>; let the theme control colours */
.prose-styles pre[data-theme] { background: unset !important; color: unset !important; }
.prose-styles pre[data-theme] code { color: unset !important; }

/* Language badge — absolute-positioned ::after on code blocks */
.prose-styles pre[data-language] { position: relative; }
.prose-styles pre[data-language]:not([data-language="plaintext"]):not([data-language="text"])::after {
  content: attr(data-language);
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: 0.375rem;
  border: 1px solid rgba(0,0,0,0.08);
  background-color: rgba(255,255,255,0.7);
  color: #111827;
  backdrop-filter: saturate(180%) blur(8px);
}

/* ── Dark mode prose overrides ──────────────────────────────────────────────
 *
 * Kept in a single @media block to make light/dark pairs easy to compare.
 * ─────────────────────────────────────────────────────────────────────────── */

.dark .prose-styles code { background: #374151; color: #f3f4f6; }
.dark .prose-styles pre { border-color: #4b5563; }
.dark .prose-styles blockquote { border-left-color: #4b5563; color: #9ca3af; }
.dark .prose-styles th, .dark .prose-styles td { border-color: #4b5563; }
.dark .prose-styles th { background: #374151; }
.dark .prose-styles hr { border-top-color: #4b5563; }

.dark .prose-styles pre[data-language]::after {
  border-color: rgba(255,255,255,0.12);
  background-color: rgba(17, 24, 39, 0.6);
  color: #f9fafb;
}

/* function-plot renders SVG axes/grid via D3; override stroke/fill for dark */
.dark .function-plot-container svg .axis path,
.dark .function-plot-container svg .axis line { stroke: #ffffff; }
.dark .function-plot-container svg .axis text { fill: #ffffff; }
.dark .function-plot-container svg .grid path,
.dark .function-plot-container svg .grid line { stroke: #64748b; }
.dark .function-plot-container svg path.x.origin,
.dark .function-plot-container svg path.y.origin {
  stroke: #ffffff !important;
  stroke-width: 2px !important;
  stroke-opacity: 1 !important;
}

/* ── Fountain screenplay ─────────────────────────────────────────────────────
 *
 * fountain-js outputs semantic HTML; these rules apply industry-standard
 * screenplay formatting (Courier New, page-width margins, centred dialogue).
 * ─────────────────────────────────────────────────────────────────────────── */

.fountain-screenplay,
.fountain-screenplay * { font-family: 'Courier New', Courier, monospace; }
.fountain-screenplay { font-size: 12pt; max-width: 8.5in; margin: 0 auto; line-height: 1.2; }
.fountain-screenplay .fountain-script h2,
.fountain-screenplay .fountain-script h3,
.fountain-screenplay h4 { font-size: 14pt; font-weight: bold; margin: 1rem 0; text-transform: uppercase; }
.fountain-screenplay h3 { text-transform: uppercase; }
.fountain-screenplay h4 { text-align: center; }
.fountain-screenplay .dialogue { width: 4in; margin-left: auto; margin-right: auto; }
.fountain-screenplay .parenthetical { text-align: center; }
.fountain-screenplay .centered { text-align: center; }
.fountain-title-page { text-align: center; padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 1px solid #ccc; }
.fountain-screenplay span.bold { font-weight: bold; }
.fountain-screenplay span.italic { font-style: italic; }
.fountain-screenplay span.underline { text-decoration: underline; }
.fountain-screenplay span.bold.italic { font-weight: bold; font-style: italic; }
.fountain-screenplay span.bold.underline { font-weight: bold; text-decoration: underline; }
.fountain-screenplay span.italic.underline { font-style: italic; text-decoration: underline; }
.fountain-screenplay span.bold.italic.underline { font-weight: bold; font-style: italic; text-decoration: underline; }
.fountain-screenplay-source summary { cursor: pointer; user-select: none; }
.fountain-screenplay-source[open] summary { margin-bottom: 0.5rem; }

/* ── CodeMirror token colours ────────────────────────────────────────────────
 *
 * CodeMirror generates obfuscated class names (ͼc, ͼ5, …) for syntax tokens.
 * These rules set the foreground colour for the language-name token and
 * markdown syntax characters (hashtags, backticks, etc.) so they match the
 * app text colour rather than the theme default.
 * ─────────────────────────────────────────────────────────────────────────── */

span.ͼc { color: var(--foreground, #111827); }  /* code block language name */
span.ͼ5 { color: var(--foreground, #111827); }  /* markdown syntax chars     */

.dark span.ͼc { color: var(--foreground, #f9fafb); }
.dark span.ͼ5 { color: var(--foreground, #f9fafb); }

/* ── Details / summary ───────────────────────────────────────────────────────
 *
 * Collapsible source-code disclosures rendered by rehype-abc, rehype-mermaid,
 * rehype-fountain, and rehype-functionplot use <details>/<summary>. The muted
 * colour signals these are secondary/expandable content.
 * ─────────────────────────────────────────────────────────────────────────── */

details > summary { color: #959595; }

.dark details > summary { color: #6b7280; }

/* ── Typeahead ───────────────────────────────────────────────────────────────*/

@keyframes typeahead-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.typeahead-item {
  opacity: 0;
  animation: typeahead-in 0.2s ease forwards;
}

@keyframes typeahead-dot {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50%       { opacity: 1;   transform: translateY(-2px); }
}
.typeahead-dot {
  animation: typeahead-dot 1s ease infinite;
}
