/*
 * Shared documentation prose styles.
 *
 * Applied to rendered markdown — today the editor's live preview pane
 * (`.editor-preview .prose`), and designed to be the SAME stylesheet the
 * public render pipeline reuses when it lands, so what an author sees in the
 * preview matches what readers get. This is the fidelity lever: whether the
 * HTML comes from `marked` (now) or the server renderer (later), these rules
 * govern how it looks.
 *
 * Colours/sizing use the Ekosystem theme variables (`--eko-t-color-*`) so the
 * prose tracks the active theme. Sizes follow the editor mock.
 *
 * These are plain element rules (not Tailwind utilities), so they survive
 * purge and apply to dynamically-injected innerHTML.
 */

.prose {
  font-size: 15px;
  line-height: 1.7;
  color: oklch(var(--eko-t-color-text));
}

.prose > :first-child {
  margin-top: 0;
}
.prose > :last-child {
  margin-bottom: 0;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4 {
  font-weight: 600;
  line-height: 1.25;
  color: oklch(var(--eko-t-color-text));
  margin: 1.4em 0 0.5em;
}
.prose h1 {
  font-size: 24px;
}
.prose h2 {
  font-size: 19px;
  margin-top: 1.3em;
}
.prose h3 {
  font-size: 16px;
}
.prose h4 {
  font-size: 15px;
}

.prose p {
  margin: 0 0 1em;
}

.prose a {
  color: oklch(var(--eko-t-color-accent));
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose ul,
.prose ol {
  margin: 0 0 1em;
  padding-left: 1.5em;
}
.prose ul {
  list-style: disc;
}
.prose ol {
  list-style: decimal;
}
.prose li {
  margin: 0.25em 0;
}
.prose li > ul,
.prose li > ol {
  margin: 0.25em 0;
}

.prose code {
  font-family: var(--eko-t-font-family-code);
  font-size: 0.875em;
  padding: 0.15em 0.35em;
  border-radius: var(--eko-t-border-radius-sm);
  background: oklch(var(--eko-t-color-surface-raised));
}

.prose pre {
  margin: 0 0 1em;
  padding: 14px 16px;
  overflow: auto;
  border: 1px solid oklch(var(--eko-t-color-border));
  border-radius: var(--eko-t-border-radius-md);
  background: oklch(var(--eko-t-color-surface-raised));
  font-family: var(--eko-t-font-family-code);
  font-size: 13px;
  line-height: 1.6;
}
.prose pre code {
  padding: 0;
  background: none;
  font-size: inherit;
}

.prose blockquote {
  margin: 0 0 1em;
  padding: 0.2em 0 0.2em 1em;
  border-left: 3px solid oklch(var(--eko-t-color-border));
  color: oklch(var(--eko-t-color-text-weak));
}

.prose img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 8px 0;
  padding: 6px;
  background: oklch(var(--eko-t-color-surface));
  border: 1px solid oklch(var(--eko-t-color-border-strong));
  border-radius: var(--eko-t-border-radius-lg);
  box-shadow:
    0 1px 2px oklch(var(--eko-t-color-shadow-sm-hard)),
    0 8px 24px -8px oklch(var(--eko-t-color-shadow-lg-soft));
}

.prose hr {
  margin: 1.5em 0;
  border: 0;
  border-top: 1px solid oklch(var(--eko-t-color-border));
}

.prose table {
  width: 100%;
  margin: 0 0 1em;
  border-collapse: collapse;
  font-size: 14px;
}
.prose th,
.prose td {
  padding: 8px 12px;
  border: 1px solid oklch(var(--eko-t-color-border));
  text-align: left;
}
.prose th {
  font-weight: 600;
  background: oklch(var(--eko-t-color-surface-raised));
}

/* Generic container block (`::: type Title … :::`). Until the designed
 * extension set lands every type shares one box; `data-callout` carries the
 * type for later per-type styling. */
.prose .callout {
  margin: 0 0 1em;
  padding: 14px 16px;
  border: 1px solid oklch(var(--eko-t-color-border));
  border-left: 3px solid oklch(var(--eko-t-color-accent));
  border-radius: var(--eko-t-border-radius-md);
  background: oklch(var(--eko-t-color-surface-raised));
}
.prose .callout__title {
  font-weight: 600;
  margin-bottom: 0.35em;
  color: oklch(var(--eko-t-color-text));
}
.prose .callout__body > :last-child {
  margin-bottom: 0;
}

/* Per-type callout accents. `note` keeps the default accent from .callout above;
 * an unknown type also falls back to it (forward-compat). Placeholder palette
 * wired to the Ekosystem status colours — swap for the designer's look later. */
.prose .callout[data-callout="warning"],
.prose .callout[data-callout="caution"] {
  border-left-color: oklch(var(--eko-t-color-status-warning));
}
.prose .callout[data-callout="tip"],
.prose .callout[data-callout="success"] {
  border-left-color: oklch(var(--eko-t-color-status-success));
}
.prose .callout[data-callout="info"] {
  border-left-color: oklch(var(--eko-t-color-status-info));
}
.prose .callout[data-callout="danger"] {
  border-left-color: oklch(var(--eko-t-color-status-danger));
}

/* Fenced code with a copy button (Markdown::Decorations::CodeCopy + its client
 * mirror). The wrapper is the positioning context for the floating button; the
 * <pre> keeps its styling from the rules above. */
.prose .code-block {
  position: relative;
  margin: 0 0 1em;
}
.prose .code-block pre {
  margin: 0;
}
.prose .code-block__copy,
.prose .code-block__copied {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 8px;
  font-family: var(--eko-t-font-family-code);
  font-size: 12px;
  line-height: 1.4;
  border: 1px solid oklch(var(--eko-t-color-border));
  border-radius: var(--eko-t-border-radius-sm);
  background: oklch(var(--eko-t-color-surface));
  color: oklch(var(--eko-t-color-text-weak));
}
.prose .code-block__copy {
  cursor: pointer;
}
.prose .code-block__copy:hover {
  color: oklch(var(--eko-t-color-text));
  background: oklch(var(--eko-t-color-surface-raised));
}
.prose .code-block__copied {
  color: oklch(var(--eko-t-color-status-success));
  border-color: oklch(var(--eko-t-color-border-success));
}

/* Syntax highlight theme. Placeholder palette covering both highlighters that
 * feed `.prose`: Rouge's short classes (server, baked at publish) and
 * highlight.js's hljs-* classes (editor preview). Token colours are approximate
 * across the two engines; structure is identical. Swap for the finalised theme
 * later without touching the pipeline. */
.prose .highlight .k,
.prose .highlight .kd,
.prose .highlight .kn,
.prose .highlight .kp,
.prose .highlight .kr,
.prose .highlight .kt,
.prose .hljs-keyword,
.prose .hljs-built_in,
.prose .hljs-literal {
  color: oklch(var(--eko-t-color-accent));
}
.prose .highlight .s,
.prose .highlight .s1,
.prose .highlight .s2,
.prose .highlight .sb,
.prose .highlight .sc,
.prose .highlight .sd,
.prose .highlight .se,
.prose .highlight .sh,
.prose .highlight .si,
.prose .highlight .sx,
.prose .highlight .sr,
.prose .highlight .ss,
.prose .hljs-string,
.prose .hljs-regexp {
  color: oklch(var(--eko-t-color-status-success));
}
.prose .highlight .c,
.prose .highlight .c1,
.prose .highlight .cm,
.prose .highlight .cp,
.prose .highlight .cs,
.prose .hljs-comment,
.prose .hljs-quote {
  color: oklch(var(--eko-t-color-text-weak));
  font-style: italic;
}
.prose .highlight .m,
.prose .highlight .mi,
.prose .highlight .mf,
.prose .highlight .mh,
.prose .highlight .mo,
.prose .highlight .il,
.prose .hljs-number {
  color: oklch(var(--eko-t-color-status-warning));
}
.prose .highlight .nf,
.prose .highlight .nc,
.prose .highlight .nn,
.prose .highlight .nb,
.prose .highlight .na,
.prose .highlight .nt,
.prose .hljs-title,
.prose .hljs-title.function_,
.prose .hljs-title.class_,
.prose .hljs-attr,
.prose .hljs-attribute,
.prose .hljs-name,
.prose .hljs-type {
  color: oklch(var(--eko-t-color-status-info));
}
.prose .highlight .nv,
.prose .highlight .vi,
.prose .highlight .vg,
.prose .hljs-variable,
.prose .hljs-symbol {
  color: oklch(var(--eko-t-color-text));
}