/*
 * Single source of truth for markdown-content typography on the canvas.
 *
 * Two sizes are exposed:
 *   - .contentSmall  — in-canvas widgets (compact padding, body 14px)
 *   - .contentLarge  — expanded / split-screen panes (generous padding, 15px)
 *
 * Plus an optional inert helper:
 *   - .inert         — makes the content non-interactive except for links,
 *                      images, videos and task-list checkboxes. Apply this
 *                      to in-canvas previews that don't sit behind an
 *                      interactGate so drag-to-pan keeps working.
 *
 * Applied automatically by `<MarkdownView>` (size + inert props) and by
 * `<MdxRenderer>` for the MDX-rendered output. Consumers compose this
 * with their own wrapper class via CSS-modules class concatenation.
 */

/* ── Shared color tokens ───────────────────────────────────────────── */

.contentSmall,
.contentLarge {
  --sb--markdown-bg: var(--color-background, #ffffff);
  --sb--markdown-fg: var(--color-foreground, #1f2328);
  --sb--markdown-muted: var(--color-foreground-muted, #656d76);
  --sb--markdown-accent: var(--color-background-accent-emphasis, #2f81f7);
  background: var(--sb--markdown-bg);
  color: var(--sb--markdown-fg);
  font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
}

/* ── Small (in-canvas) ─────────────────────────────────────────────── */

.contentSmall {
  padding: 16px 20px;
  font-size: 14px;
  line-height: 1.6;
  cursor: text;
  min-height: 60px;
}

.contentSmall :global(*) { color: inherit; }
.contentSmall a {
  color: var(--sb--markdown-accent);
  text-decoration: none;
  cursor: pointer;
}
.contentSmall a:hover { text-decoration: underline; }
.contentSmall img,
.contentSmall video {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid var(--color-border, #d0d7de);
  margin: 8px 0;
  display: block;
}
.contentSmall video { background: var(--color-background-muted, #f6f8fa); }
.contentSmall h1 { font-size: 20px; font-weight: 700; margin: 0 0 8px; line-height: 1.3; }
.contentSmall h2 { font-size: 17px; font-weight: 600; margin: 0 0 6px; line-height: 1.3; }
.contentSmall h3 { font-size: 15px; font-weight: 600; margin: 0 0 4px; line-height: 1.3; }
.contentSmall p  { margin: 0 0 8px; }
.contentSmall code {
  background: var(--color-background-neutral-muted, #afb8c133);
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
.contentSmall ul { margin: 0 0 8px; padding-left: 20px; list-style-type: disc; }
.contentSmall ol { margin: 0 0 8px; padding-left: 20px; list-style-type: decimal; }
.contentSmall li { margin: 0 0 2px; display: list-item; }
/* CommonMark loose-list compatibility: when items have blank lines between
 * them, remark wraps each item's content in <p>. The global `.contentSmall p`
 * margin (8px) would then blow up spacing inside the bullet and visually
 * detach the text from its marker. Reset to zero inside <li>; restore a
 * tighter rhythm only when an <li> contains multiple <p>s. */
.contentSmall li > p { margin: 0; }
.contentSmall li > p + p { margin-top: 4px; }
.contentSmall input[type="checkbox"] {
  margin-right: 6px;
  accent-color: var(--sb--markdown-accent);
}
.contentSmall li:has(input[type="checkbox"]) { list-style: none; margin-left: -20px; }
.contentSmall del { text-decoration: line-through; color: var(--sb--markdown-muted); }
.contentSmall table {
  border-collapse: collapse;
  margin: 8px 0;
  width: 100%;
  font-size: 13px;
}
.contentSmall th,
.contentSmall td {
  border: 1px solid var(--color-border, #d0d7de);
  padding: 6px 12px;
  text-align: left;
}
.contentSmall th { background: var(--color-background-muted, #f6f8fa); font-weight: 600; }
.contentSmall pre {
  padding: 12px 16px;
  border-radius: 6px;
  border: 1px solid var(--color-border-muted, #d8dee4);
  overflow-x: auto;
  margin: 8px 0;
  background: var(--color-background-neutral-muted, #afb8c133);
  line-height: 1.4;
}
.contentSmall pre[style] {
  border-radius: 6px;
  border: 1px solid var(--color-border-muted, #d8dee4);
  overflow-x: auto;
  margin: 8px 0;
}
.contentSmall pre code {
  background: none;
  padding: 0;
  font-size: 12px;
  font-weight: 400;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  white-space: pre;
  word-break: normal;
  overflow-wrap: normal;
  display: block;
}
.contentSmall :global(.line::before) { display: none !important; }
.contentSmall blockquote {
  border-left: 4px solid var(--color-border, #d0d7de);
  margin: 8px 0;
  padding: 4px 16px;
  color: var(--sb--markdown-muted);
}
.contentSmall hr {
  border: none;
  border-top: 1px solid var(--color-border, #d0d7de);
  margin: 16px 0;
}
.contentSmall :global(.placeholder),
.contentLarge :global(.placeholder) {
  color: var(--sb--markdown-muted);
  font-style: italic;
}

/* ── Inert (drag-friendly) helper for canvas widgets ───────────────── */

.inert :global(*) { pointer-events: none; }
.inert a,
.inert img,
.inert video,
.inert input[type="checkbox"] { pointer-events: auto; }

/* ── Large (expanded) ──────────────────────────────────────────────── */

.contentLarge {
  padding: 32px 40px;
  font-size: 15px;
  line-height: 1.7;
  max-width: 800px;
  margin: 0 auto;
}

.contentLarge :global(*) { color: inherit; }
.contentLarge a {
  color: var(--sb--markdown-accent);
  text-decoration: none;
  cursor: pointer;
}
.contentLarge a:hover { text-decoration: underline; }
.contentLarge img,
.contentLarge video {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid var(--color-border, #d0d7de);
  margin: 8px 0;
  display: block;
}
.contentLarge h1 { font-size: 24px; font-weight: 700; margin: 0 0 12px; line-height: 1.3; }
.contentLarge h2 { font-size: 20px; font-weight: 600; margin: 0 0 10px; line-height: 1.3; }
.contentLarge h3 { font-size: 17px; font-weight: 600; margin: 0 0 6px;  line-height: 1.3; }
.contentLarge p  { margin: 0 0 12px; }
.contentLarge code {
  background: var(--color-background-neutral-muted, #afb8c133);
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, monospace;
}
.contentLarge ul { margin: 0 0 12px; padding-left: 24px; list-style: disc; }
.contentLarge ol { margin: 0 0 12px; padding-left: 24px; list-style: decimal; }
.contentLarge li { margin: 0 0 4px; display: list-item; }
/* CommonMark loose-list compatibility — see .contentSmall comment above. */
.contentLarge li > p { margin: 0; }
.contentLarge li > p + p { margin-top: 6px; }
.contentLarge input[type="checkbox"] {
  margin-right: 6px;
  accent-color: var(--sb--markdown-accent);
}
.contentLarge li:has(input[type="checkbox"]) { list-style: none; margin-left: -24px; }
.contentLarge del { text-decoration: line-through; color: var(--sb--markdown-muted); }
.contentLarge table {
  border-collapse: collapse;
  margin: 12px 0;
  width: 100%;
  font-size: 14px;
}
.contentLarge th,
.contentLarge td {
  border: 1px solid var(--color-border, #d0d7de);
  padding: 6px 12px;
  text-align: left;
}
.contentLarge th { background: var(--color-background-muted, #f6f8fa); font-weight: 600; }
.contentLarge pre {
  padding: 12px 16px;
  border-radius: 6px;
  border: 1px solid var(--color-border-muted, #d8dee4);
  overflow-x: auto;
  margin: 8px 0;
  background: var(--color-background-neutral-muted, #afb8c133);
  line-height: 1.4;
}
.contentLarge pre code {
  background: none;
  padding: 0;
  font-size: 13px;
  white-space: pre;
  display: block;
}
.contentLarge blockquote {
  border-left: 4px solid var(--color-border, #d0d7de);
  margin: 12px 0;
  padding: 4px 16px;
  color: var(--sb--markdown-muted);
}
.contentLarge hr {
  border: none;
  border-top: 1px solid var(--color-border, #d0d7de);
  margin: 16px 0;
}
