/* Shipped default styles for <rocket-marked>, scoped to its light-DOM `.rocket-markdown`
 * container. Three parts: (1) Markdown typography, (2) the @lezer/highlight `.tok-*` token theme,
 * (3) KaTeX tweaks. Light is the base; dark overrides ONLY the custom properties below — so the
 * `.tok-*` selector rules are written once and the dark palette lives in one compact block. The
 * component sets `data-theme="light|dark"` (resolving `auto` in JS and tracking the OS live); the
 * `@media (prefers-color-scheme: dark)` block is a fallback scoped to `:not([data-theme])` only, so
 * it governs the pre-JS / JS-absent state and never overrides an explicit `theme`.
 */

.rocket-markdown {
  /* typography palette (light) */
  --md-fg: #1f2328;
  --md-muted: #59636e;
  --md-border: #d1d9e0;
  --md-code-bg: #f6f8fa;
  --md-link: #0969da;
  --md-quote-border: #d0d7de;
  /* Lezer token palette (light) — referenced once by the .tok-* rules further down */
  --tok-keyword: #cf222e;
  --tok-string: #0a3069;
  --tok-number: #0550ae;
  --tok-comment: #6e7781;
  --tok-name: var(--md-fg);
  --tok-def: #8250df;
  --tok-prop: #0550ae;
  --tok-type: #953800;
  --tok-meta: #116329;
  --tok-punct: #59636e;

  color: var(--md-fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  word-wrap: break-word;
}

/* ── Typography ─────────────────────────────────────────────────────────────── */
.rocket-markdown h1, .rocket-markdown h2, .rocket-markdown h3,
.rocket-markdown h4, .rocket-markdown h5, .rocket-markdown h6 {
  margin: 1.4em 0 .6em;
  font-weight: 600;
  line-height: 1.25;
}
.rocket-markdown h1 { font-size: 1.9em; padding-bottom: .3em; border-bottom: 1px solid var(--md-border); }
.rocket-markdown h2 { font-size: 1.5em; padding-bottom: .3em; border-bottom: 1px solid var(--md-border); }
.rocket-markdown h3 { font-size: 1.25em; }
.rocket-markdown h4 { font-size: 1em; }
.rocket-markdown h5 { font-size: .875em; }
.rocket-markdown h6 { font-size: .85em; color: var(--md-muted); }
.rocket-markdown > h1:first-child, .rocket-markdown > h2:first-child,
.rocket-markdown > h3:first-child { margin-top: 0; }

.rocket-markdown p { margin: 0 0 1em; }
.rocket-markdown a { color: var(--md-link); text-decoration: none; }
.rocket-markdown a:hover { text-decoration: underline; }

.rocket-markdown ul, .rocket-markdown ol { margin: 0 0 1em; padding-left: 2em; }
.rocket-markdown li { margin: .25em 0; }
.rocket-markdown li > p { margin: .25em 0; }

/* GFM task lists: marked emits `<li><input type=checkbox disabled> text` — drop the bullet and
 * pull the row back so the checkbox aligns with normal text. */
.rocket-markdown li:has(> input[type="checkbox"]) { list-style: none; margin-left: -1.3em; }
.rocket-markdown input[type="checkbox"] { margin: 0 .45em 0 0; vertical-align: middle; }

.rocket-markdown blockquote {
  margin: 0 0 1em;
  padding: 0 1em;
  color: var(--md-muted);
  border-left: .25em solid var(--md-quote-border);
}

/* inline + fenced code (token spans inside <pre><code> get their colors from the .tok-* rules) */
.rocket-markdown code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .88em;
  background: var(--md-code-bg);
  padding: .2em .4em;
  border-radius: 6px;
}
.rocket-markdown pre {
  margin: 0 0 1em;
  padding: 1em;
  overflow: auto;
  background: var(--md-code-bg);
  border-radius: 8px;
  line-height: 1.45;
}
.rocket-markdown pre code { background: none; padding: 0; font-size: .85em; }

/* GFM tables */
.rocket-markdown table { border-collapse: collapse; margin: 0 0 1em; max-width: 100%; }
.rocket-markdown th, .rocket-markdown td { padding: .5em .9em; border: 1px solid var(--md-border); }
.rocket-markdown th { font-weight: 600; background: var(--md-code-bg); }
.rocket-markdown tbody tr:nth-child(2n) td { background: var(--md-code-bg); }

.rocket-markdown img { max-width: 100%; box-sizing: border-box; }
.rocket-markdown hr { height: 1px; margin: 1.5em 0; border: 0; background: var(--md-border); }

/* ── Lezer token theme (classHighlighter `.tok-*` classes), referencing the palette vars ──────── */
.rocket-markdown .tok-keyword, .rocket-markdown .tok-operator { color: var(--tok-keyword); }
.rocket-markdown .tok-string, .rocket-markdown .tok-deleted { color: var(--tok-string); }
.rocket-markdown .tok-number, .rocket-markdown .tok-bool, .rocket-markdown .tok-atom,
.rocket-markdown .tok-literal, .rocket-markdown .tok-inserted { color: var(--tok-number); }
.rocket-markdown .tok-comment { color: var(--tok-comment); font-style: italic; }
.rocket-markdown .tok-variableName, .rocket-markdown .tok-local { color: var(--tok-name); }
.rocket-markdown .tok-definition { color: var(--tok-def); }
.rocket-markdown .tok-propertyName, .rocket-markdown .tok-labelName { color: var(--tok-prop); }
.rocket-markdown .tok-typeName, .rocket-markdown .tok-className,
.rocket-markdown .tok-namespace { color: var(--tok-type); }
.rocket-markdown .tok-meta, .rocket-markdown .tok-macroName { color: var(--tok-meta); }
.rocket-markdown .tok-punctuation { color: var(--tok-punct); }
.rocket-markdown .tok-invalid { color: var(--tok-keyword); }
.rocket-markdown .tok-link, .rocket-markdown .tok-url { color: var(--tok-string); text-decoration: underline; }
.rocket-markdown .tok-heading { color: var(--tok-prop); font-weight: 600; }
.rocket-markdown .tok-strong { font-weight: 600; }
.rocket-markdown .tok-emphasis { font-style: italic; }

/* ── KaTeX ──────────────────────────────────────────────────────────────────── */
.rocket-markdown .katex { font-size: 1.05em; }
.rocket-markdown .katex-display { margin: 1em 0; padding: .2em 0; overflow-x: auto; overflow-y: hidden; }

/* ── Schemata live blocks (```table / ```yaml run — see static/components/marked-blocks.js) ─────
   All colors come from the same --md-* / --tok-* custom properties as the rest of the sheet, so the
   blocks reskin light/dark with the container's data-theme and need no palette of their own. */
.rocket-markdown .md-block { margin: 0 0 1em; }
.rocket-markdown .md-block-status {
  padding: .8em 1em;
  color: var(--md-muted);
  background: var(--md-code-bg);
  border: 1px solid var(--md-border);
  border-radius: 8px;
  font-size: .9em;
}
.rocket-markdown .md-block-table { min-height: 3rem; }
/* The grid the server patches in is a block-level rocket-tabulator; keep it from bleeding wide. */
.rocket-markdown .md-block-table rocket-tabulator { display: block; max-width: 100%; }

.rocket-markdown .md-block-run {
  border: 1px solid var(--md-border);
  border-radius: 8px;
  padding: .75em;
  background: var(--md-code-bg);
}
/* The highlighted <pre> already carries the code-bg; flatten its chrome inside the framed run block. */
.rocket-markdown .md-block-run > pre { margin: 0; padding: .5em .75em; background: transparent; }
.rocket-markdown .md-block-run-bar { display: flex; align-items: center; gap: .5rem; margin-top: .6em; }
.rocket-markdown .md-run-btn {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .3em .9em;
  font: inherit;
  font-size: .9em;
  color: #fff;
  background: var(--md-link);
  border: 1px solid var(--md-link);
  border-radius: 6px;
  cursor: pointer;
}
.rocket-markdown .md-run-btn:hover { filter: brightness(1.05); }
.rocket-markdown .md-run-btn:disabled,
.rocket-markdown .md-run-btn.md-running { opacity: .6; cursor: default; pointer-events: none; }
/* The spinner shows only while the run is in flight — driven by the `md-running` class the client-side
   run handler toggles (schemataMdRun), NOT a Datastar signal (client-owned, can't stick on a dropped request). */
.rocket-markdown .md-run-spinner { display: none; }
.rocket-markdown .md-run-btn.md-running .md-run-spinner {
  display: inline-block;
  width: .8em;
  height: .8em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: md-run-spin .6s linear infinite;
}
@keyframes md-run-spin { to { transform: rotate(360deg); } }
.rocket-markdown .md-block-run-result:empty { display: none; }
.rocket-markdown .md-block-run-result { margin-top: .75em; }
/* Server-emitted error card for a failed ```table load or ```yaml run (kept theme-aware here). */
.rocket-markdown .md-block-error {
  padding: .7em .9em;
  border: 1px solid var(--tok-keyword);
  border-radius: 8px;
  color: var(--tok-keyword);
  background: color-mix(in srgb, var(--tok-keyword) 8%, var(--md-code-bg));
  font-size: .9em;
  white-space: pre-wrap;
}
/* Secondary run-bar buttons (Clear / Edit) — outline style beside the primary Run button. */
.rocket-markdown .md-clear-btn,
.rocket-markdown .md-edit-btn {
  padding: .3em .8em;
  font: inherit;
  font-size: .9em;
  color: var(--md-fg);
  background: transparent;
  border: 1px solid var(--md-border);
  border-radius: 6px;
  cursor: pointer;
}
.rocket-markdown .md-clear-btn:hover,
.rocket-markdown .md-edit-btn:hover { background: var(--md-code-bg); }
/* Clear is only meaningful once a run has produced a result — reveal it via `md-has-result`, toggled by
   the client run/clear handlers (schemataMdRun/schemataMdClear). */
.rocket-markdown .md-clear-btn { display: none; }
.rocket-markdown .md-block-run.md-has-result .md-clear-btn { display: inline-flex; }

/* ── Dark: override the custom properties only (data-theme set by the component) ──────────────── */
.rocket-markdown[data-theme="dark"] {
  --md-fg: #e6edf3;
  --md-muted: #9198a1;
  --md-border: #3d444d;
  --md-code-bg: #151b23;
  --md-link: #4493f8;
  --md-quote-border: #3d444d;
  --tok-keyword: #ff7b72;
  --tok-string: #a5d6ff;
  --tok-number: #79c0ff;
  --tok-comment: #8b949e;
  --tok-def: #d2a8ff;
  --tok-prop: #79c0ff;
  --tok-type: #ffa657;
  --tok-meta: #7ee787;
  --tok-punct: #9198a1;
}

/* Fallback for the pre-JS / JS-absent state ONLY (never overrides an explicit data-theme). */
@media (prefers-color-scheme: dark) {
  .rocket-markdown:not([data-theme]) {
    --md-fg: #e6edf3;
    --md-muted: #9198a1;
    --md-border: #3d444d;
    --md-code-bg: #151b23;
    --md-link: #4493f8;
    --md-quote-border: #3d444d;
    --tok-keyword: #ff7b72;
    --tok-string: #a5d6ff;
    --tok-number: #79c0ff;
    --tok-comment: #8b949e;
    --tok-def: #d2a8ff;
    --tok-prop: #79c0ff;
    --tok-type: #ffa657;
    --tok-meta: #7ee787;
    --tok-punct: #9198a1;
  }
}