@layer commonpub {
/* ===========================================
   CommonPub Prose — Content rendering styles
   Extracted from unified-v2 08-view-article.html
   =========================================== */

.cpub-prose {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text);
  max-width: var(--content-max-width);
  /* Long unbroken URLs/tokens (common in federated pre-rendered HTML) must wrap
     rather than push a horizontal scrollbar onto the whole page on mobile. */
  overflow-wrap: break-word;
}

/* Headings */
.cpub-prose h2 {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
  line-height: var(--leading-tight);
  color: var(--text);
}

.cpub-prose h3 {
  font-size: var(--text-md);
  font-weight: var(--font-weight-semibold);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
  line-height: var(--leading-tight);
  color: var(--text);
}

.cpub-prose h4 {
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
  line-height: var(--leading-snug);
  color: var(--text);
}

/* Paragraphs */
.cpub-prose p {
  margin-bottom: var(--space-4);
  line-height: var(--leading-normal);
}

.cpub-prose p:last-child {
  margin-bottom: 0;
}

/* Links */
.cpub-prose a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: var(--border-width-thin) solid var(--accent-border);
}

.cpub-prose a:hover {
  border-bottom-color: var(--accent);
}

/* Inline code */
.cpub-prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--code-inline);
  background: var(--surface2);
  padding: 2px 6px;
  border: var(--border-width-thin) solid var(--border2);
}

/* Code blocks */
.cpub-prose pre {
  background: #0d1117;
  color: #e6edf3;
  padding: var(--space-4);
  margin: var(--space-5) 0;
  border: var(--border-width-default) solid var(--border);
  overflow-x: auto;
  line-height: 1.5;
  font-size: var(--text-sm);
}

.cpub-prose pre code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

/* Basic syntax highlighting for pre-rendered federated code */
.cpub-prose pre .hljs-keyword { color: #ff7b72; }
.cpub-prose pre .hljs-string { color: #a5d6ff; }
.cpub-prose pre .hljs-comment { color: #8b949e; font-style: italic; }
.cpub-prose pre .hljs-number { color: #79c0ff; }
.cpub-prose pre .hljs-title { color: #d2a8ff; }
.cpub-prose pre .hljs-name { color: #7ee787; }
.cpub-prose pre .hljs-variable { color: #ffa657; }

/* Blockquotes */
.cpub-prose blockquote {
  border-left: 4px solid var(--accent);
  padding: var(--space-3) var(--space-5);
  margin: var(--space-5) 0;
  background: var(--accent-bg);
  color: var(--text-dim);
}

.cpub-prose blockquote p {
  margin-bottom: var(--space-2);
}

.cpub-prose blockquote p:last-child {
  margin-bottom: 0;
}

/* Images */
.cpub-prose img {
  max-width: 100%;
  height: auto;
  border: var(--border-width-default) solid var(--border);
  box-shadow: var(--shadow-md);
  display: block;
  margin: var(--space-5) 0;
}

/* Lists */
.cpub-prose ul,
.cpub-prose ol {
  margin: var(--space-4) 0;
  padding-left: var(--space-6);
}

.cpub-prose li {
  margin-bottom: var(--space-2);
  line-height: var(--leading-normal);
}

.cpub-prose li::marker {
  color: var(--text-faint);
}

/* Horizontal rules / dividers */
.cpub-prose hr {
  border: none;
  border-top: var(--border-width-default) solid var(--border2);
  margin: var(--space-8) 0;
}

/* Bold, italic, strikethrough */
.cpub-prose strong {
  font-weight: var(--font-weight-bold);
}

.cpub-prose em {
  font-style: italic;
}

.cpub-prose s {
  text-decoration: line-through;
  color: var(--text-dim);
}

/* Callout variants */
.cpub-prose .callout {
  padding: var(--space-4);
  margin: var(--space-5) 0;
  border: var(--border-width-default) solid var(--border);
  border-left-width: 4px;
}

.cpub-prose .callout-info {
  border-left-color: var(--accent);
  background: var(--accent-bg);
}

.cpub-prose .callout-tip {
  border-left-color: var(--green);
  background: var(--green-bg);
}

.cpub-prose .callout-warning {
  border-left-color: var(--yellow);
  background: var(--yellow-bg);
}

.cpub-prose .callout-danger {
  border-left-color: var(--red);
  background: var(--red-bg);
}

/* Gallery */
.cpub-prose .cpub-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
  margin: var(--space-5) 0;
}

/* Video */
.cpub-prose .cpub-video {
  margin: var(--space-5) 0;
  border: var(--border-width-default) solid var(--border);
  background: var(--surface2);
  padding: var(--space-6);
  text-align: center;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

/* Embed */
.cpub-prose .cpub-embed {
  margin: var(--space-5) 0;
  border: var(--border-width-default) solid var(--border);
  overflow: hidden;
}

/* Markdown */
.cpub-prose .cpub-markdown {
  margin: var(--space-5) 0;
}

/* Parts list */
.cpub-prose .cpub-parts-list {
  margin: var(--space-5) 0;
  border: var(--border-width-default) solid var(--border);
  background: var(--surface);
  overflow-x: auto;
}

/* Build step */
.cpub-prose .cpub-build-step {
  margin: var(--space-5) 0;
  padding: var(--space-4);
  border: var(--border-width-default) solid var(--border);
  box-shadow: var(--shadow-sm);
}

.cpub-prose .cpub-build-step-number {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--accent);
  display: block;
  margin-bottom: var(--space-2);
}

/* Tool list */
.cpub-prose .cpub-tool-list {
  margin: var(--space-5) 0;
  padding: var(--space-4);
  border: var(--border-width-default) solid var(--border);
  background: var(--surface2);
}

/* Downloads */
.cpub-prose .cpub-downloads {
  margin: var(--space-5) 0;
  padding: var(--space-4);
  border: var(--border-width-default) solid var(--border);
}

/* Quiz */
.cpub-prose .cpub-quiz {
  margin: var(--space-5) 0;
  padding: var(--space-5);
  border: var(--border-width-default) solid var(--purple-border);
  background: var(--purple-bg);
}

.cpub-prose .cpub-quiz-question {
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-3);
}

/* Interactive slider */
.cpub-prose .cpub-interactive-slider {
  margin: var(--space-5) 0;
  padding: var(--space-5);
  border: var(--border-width-default) solid var(--teal-border);
  background: var(--teal-bg);
}

/* Checkpoint */
.cpub-prose .cpub-checkpoint {
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-5);
  border: var(--border-width-default) solid var(--green-border);
  background: var(--green-bg);
  font-weight: var(--font-weight-medium);
  color: var(--green-text);
  text-align: center;
}

/* Math notation */
.cpub-prose .cpub-math {
  margin: var(--space-4) 0;
  font-family: var(--font-mono);
}

.cpub-prose .cpub-math-display {
  text-align: center;
  padding: var(--space-4);
  background: var(--surface2);
  border: var(--border-width-thin) solid var(--border2);
  font-size: var(--text-lg);
}

.cpub-prose .cpub-math-inline {
  display: inline;
}

/* Table (generic) */
.cpub-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-5) 0;
  font-size: var(--text-sm);
}

.cpub-prose th,
.cpub-prose td {
  padding: var(--space-2) var(--space-3);
  border: var(--border-width-thin) solid var(--border2);
  text-align: left;
}

/* ── Remote-HTML overflow containment ──
   `.cpub-prose` also renders arbitrary REMOTE author HTML on some surfaces (e.g. the
   federated hub post page renders `v-html=sanitizeBlockHtml(post.content)`). A wide
   remote <table>/<pre> there must scroll inside itself instead of forcing a sideways
   PAGE scroll on mobile. But `.cpub-prose` is ALSO the shared class for LOCAL
   editor-authored article/blog/lesson prose, where display:block+nowrap would wrongly
   stop long-text cells wrapping and add desktop horizontal scroll. So gate the
   containment behind an opt-in `.cpub-html-contain` marker applied only on remote
   surfaces — never on local editor prose. Defined AFTER the base table rule so it wins
   on the specificity tie. */
.cpub-html-contain pre { overflow-x: auto; max-width: 100%; }
.cpub-html-contain table { display: block; max-width: 100%; overflow-x: auto; }
.cpub-html-contain table th,
.cpub-html-contain table td { white-space: nowrap; }
.cpub-html-contain img,
.cpub-html-contain iframe,
.cpub-html-contain video,
.cpub-html-contain embed,
.cpub-html-contain object,
.cpub-html-contain canvas,
.cpub-html-contain svg { max-width: 100%; }

.cpub-prose th {
  background: var(--surface2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* ===========================================
   Full-HTML author content (CpubMarkdown format=html)
   The v-html children carry no scoped styles, so this global, theme-aware
   baseline keeps un-styled (or var()-based) author HTML readable in BOTH
   themes. Hardcoded color literals are neutralized at sanitize time
   (sanitizeRichHtml neutralizeColors), so this baseline shows through.
   =========================================== */
.cpub-md-html {
  color: var(--text);
  line-height: var(--leading-normal);
  /* Author HTML is arbitrary — long unbroken URLs/words must wrap instead of
     forcing a horizontal page scroll on narrow (mobile) viewports. */
  overflow-wrap: break-word;
  word-break: break-word;
}
.cpub-md-html a { color: var(--accent); }
.cpub-md-html h1, .cpub-md-html h2, .cpub-md-html h3,
.cpub-md-html h4, .cpub-md-html h5, .cpub-md-html h6 { color: var(--text); }
.cpub-md-html img { max-width: 100%; height: auto; }
.cpub-md-html hr { border: 0; border-top: var(--border-width-default) solid var(--border); }
.cpub-md-html blockquote { border-left: 3px solid var(--border); color: var(--text-dim); padding-left: var(--space-4); }
.cpub-md-html th, .cpub-md-html td { border: var(--border-width-default) solid var(--border); }
.cpub-md-html pre, .cpub-md-html code { background: var(--surface2); color: var(--text); }
/* ── Mobile overflow containment for arbitrary author HTML ──
   The v-html subtree carries no scoped styles and can't be wrapped in a scroller,
   so contain each element that is prone to blow out the layout on small screens:
   wide code blocks and tables scroll inside themselves; pasted fixed-width media
   caps to the container. Without this, a single wide <table>/<pre>/<iframe> makes
   the whole page scroll sideways on mobile. */
.cpub-md-html pre { overflow-x: auto; max-width: 100%; }
/* Make the table its own horizontal scroll container (no wrapper div is possible
   in a v-html subtree): display:block + max-width caps the box to the content
   column, and nowrap cells keep the grid at its natural width so it scrolls
   instead of collapsing columns into unreadable one-letter stacks. */
.cpub-md-html table { display: block; max-width: 100%; overflow-x: auto; }
.cpub-md-html table th, .cpub-md-html table td { white-space: nowrap; }
.cpub-md-html iframe,
.cpub-md-html video,
.cpub-md-html embed,
.cpub-md-html object,
.cpub-md-html canvas,
.cpub-md-html svg { max-width: 100%; }
}