/* Shared article-content styles under staging evaluation.
 * Loaded by stage-index.php only; production index.php is intentionally untouched.
 */
.prose img,
.article-preview img {
  max-width: 100%;
  height: auto;
}

.prose ol,
.article-preview ol {
  margin: .5em 0 1em 1.5em;
  padding-left: .5em;
}

.prose code,
.article-preview code {
  padding: .12em .35em;
  border: 1px solid #e2e8f0;
  border-radius: .3rem;
  background: #f8fafc;
  color: #0f172a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .9em;
}

.prose pre,
.article-preview pre {
  max-width: 100%;
  margin: 1.25em 0;
  padding: 1rem;
  overflow-x: auto;
  border: 1px solid #1e293b;
  border-radius: .65rem;
  background: #0f172a;
  color: #e2e8f0;
  text-align: left;
  line-height: 1.55;
  white-space: pre;
  -webkit-overflow-scrolling: touch;
}

.prose pre code,
.article-preview pre code {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
}

.prose figure,
.article-preview figure {
  margin: 1.5em 0;
}

.prose figcaption,
.article-preview figcaption,
.prose caption,
.article-preview caption {
  padding: .55rem .25rem;
  color: #64748b;
  font-size: .82rem;
  line-height: 1.45;
  text-align: left;
}

.prose table,
.article-preview table {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 1.5em 0;
  overflow-x: auto;
  border: 1px solid #cbd5e1;
  border-collapse: collapse;
  border-spacing: 0;
  background: #fff;
  text-align: left;
  font-size: .9rem;
  line-height: 1.5;
  -webkit-overflow-scrolling: touch;
}

.prose thead,
.article-preview thead {
  background: #eff6ff;
  color: #1e3a8a;
}

.prose th,
.prose td,
.article-preview th,
.article-preview td {
  min-width: 9rem;
  padding: .7rem .8rem;
  border: 1px solid #cbd5e1;
  vertical-align: top;
}

.prose th,
.article-preview th {
  font-weight: 700;
}

.prose tbody tr:nth-child(even),
.article-preview tbody tr:nth-child(even) {
  background: #f8fafc;
}

:is([data-theme="dark"], html.dark) .prose code,
:is([data-theme="dark"], html.dark) .article-preview code {
  border-color: #475569;
  background: #1e293b;
  color: #e2e8f0;
}

:is([data-theme="dark"], html.dark) .prose table,
:is([data-theme="dark"], html.dark) .article-preview table {
  border-color: #475569;
  background: #18181b;
  color: #e5e7eb;
}

:is([data-theme="dark"], html.dark) .prose thead,
:is([data-theme="dark"], html.dark) .article-preview thead {
  background: #172554;
  color: #bfdbfe;
}

:is([data-theme="dark"], html.dark) .prose th,
:is([data-theme="dark"], html.dark) .prose td,
:is([data-theme="dark"], html.dark) .article-preview th,
:is([data-theme="dark"], html.dark) .article-preview td {
  border-color: #475569;
}

:is([data-theme="dark"], html.dark) .prose tbody tr:nth-child(even),
:is([data-theme="dark"], html.dark) .article-preview tbody tr:nth-child(even) {
  background: #27272a;
}

:is([data-theme="dark"], html.dark) .prose figcaption,
:is([data-theme="dark"], html.dark) .article-preview figcaption,
:is([data-theme="dark"], html.dark) .prose caption,
:is([data-theme="dark"], html.dark) .article-preview caption {
  color: #a1a1aa;
}

@media (max-width: 640px) {
  .prose table,
  .article-preview table {
    font-size: .82rem;
  }

  .prose th,
  .prose td,
  .article-preview th,
  .article-preview td {
    min-width: 8rem;
    padding: .6rem;
  }
}