/* Markdown (README / module detail readme tab) styles.
   Ported from hub.wippy.ai prod (Markdown.svelte) so stage renders
   with the same vertical rhythm and hljs token palette. Scoped to
   `.markdown` to avoid bleeding into other page chrome. */

.markdown {
  line-height: 1.7;
}

.markdown h1 {
  font-size: 1.75rem;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: #fff;
  border-bottom: 1px solid rgb(63 63 70);
  padding-bottom: 0.5rem;
}

.markdown h2 {
  font-size: 1.375rem;
  font-weight: 600;
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
  color: #fff;
}

.markdown h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  color: #fff;
}

.markdown p {
  margin-bottom: 1rem;
  color: #a1a1aa;
}

.markdown a {
  color: #60a5fa;
  text-decoration: none;
}

.markdown a:hover {
  text-decoration: underline;
}

.markdown code {
  font-family: ui-monospace, monospace;
  font-size: 0.875rem;
  background: #27272a;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  color: #e4e4e7;
}

.markdown pre {
  background: #18181b;
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin-bottom: 1rem;
  border: 1px solid rgb(39 39 42);
}

.markdown pre code {
  background: transparent;
  padding: 0;
}

.markdown ul,
.markdown ol {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
  color: #a1a1aa;
}

.markdown li {
  margin-bottom: 0.25rem;
}

.markdown ul {
  list-style-type: disc;
}

.markdown ol {
  list-style-type: decimal;
}

.markdown blockquote {
  border-left: 3px solid rgb(63 63 70);
  padding-left: 1rem;
  margin: 1rem 0;
  color: #71717a;
  font-style: italic;
}

.markdown img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin: 1rem 0;
}

.markdown table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

.markdown th,
.markdown td {
  padding: 0.5rem;
  border: 1px solid rgb(63 63 70);
  text-align: left;
}

.markdown th {
  background: #27272a;
  color: #fff;
  font-weight: 600;
}

.markdown td {
  color: #a1a1aa;
}

.markdown hr {
  border: none;
  border-top: 1px solid rgb(63 63 70);
  margin: 2rem 0;
}

/* Atom-one-dark hljs palette — ported from prod. The hub-stage bundle
   still carries the github / github-dark stylesheets under
   /static/css/hljs-{light,dark}.min.css as a fallback, but these
   rules take precedence inside .markdown because of selector
   specificity. Colors below match hub.wippy.ai exactly. */
.markdown .hljs {
  color: #d4d4d8;
}

.markdown .hljs-keyword,
.markdown .hljs-selector-tag,
.markdown .hljs-literal,
.markdown .hljs-section,
.markdown .hljs-link,
.markdown .hljs-function .hljs-keyword {
  color: #c678dd;
}

.markdown .hljs-string,
.markdown .hljs-title,
.markdown .hljs-name,
.markdown .hljs-type,
.markdown .hljs-attribute,
.markdown .hljs-symbol,
.markdown .hljs-bullet,
.markdown .hljs-addition,
.markdown .hljs-variable,
.markdown .hljs-template-tag,
.markdown .hljs-template-variable {
  color: #98c379;
}

.markdown .hljs-comment,
.markdown .hljs-quote,
.markdown .hljs-deletion,
.markdown .hljs-meta {
  color: #71717a;
}

.markdown .hljs-keyword,
.markdown .hljs-selector-tag,
.markdown .hljs-literal,
.markdown .hljs-title,
.markdown .hljs-section,
.markdown .hljs-doctag,
.markdown .hljs-type,
.markdown .hljs-name,
.markdown .hljs-strong {
  font-weight: inherit;
}

.markdown .hljs-number,
.markdown .hljs-regexp,
.markdown .hljs-literal,
.markdown .hljs-link {
  color: #d19a66;
}

.markdown .hljs-title,
.markdown .hljs-title.function_ {
  color: #61afef;
}

.markdown .hljs-params {
  color: #d4d4d8;
}

.markdown .hljs-class .hljs-title,
.markdown .hljs-title.class_,
.markdown .hljs-built_in {
  color: #e5c07b;
}

.markdown .hljs-attr {
  color: #d19a66;
}

.markdown .hljs-punctuation {
  color: #a1a1aa;
}

/* Light mode overrides — inverts text colors on plain text bits
   while keeping the token palette intact for syntax tokens. Prod
   is dark-only, but hub-stage inherits the site-wide light toggle,
   so paragraphs should be readable on a white background. */
:root:not(.dark) .markdown p,
:root:not(.dark) .markdown ul,
:root:not(.dark) .markdown ol,
:root:not(.dark) .markdown td {
  color: #3f3f46;
}

:root:not(.dark) .markdown h1,
:root:not(.dark) .markdown h2,
:root:not(.dark) .markdown h3,
:root:not(.dark) .markdown th {
  color: #18181b;
}

:root:not(.dark) .markdown code {
  background: #f4f4f5;
  color: #18181b;
}

:root:not(.dark) .markdown pre {
  background: #f4f4f5;
  border-color: rgb(228 228 231);
}

:root:not(.dark) .markdown blockquote {
  color: #52525b;
}

/* Light-mode hljs token palette — github-light derived. The atom-one-dark
   tokens above (#d19a66, #98c379, etc) only meet WCAG AA on dark
   backgrounds; on the light-mode #f4f4f5 pre/code background they drop
   to ~2.2:1 contrast and Lighthouse flags them. Override every token
   to a github-light counterpart so syntax stays readable in either
   theme. */
:root:not(.dark) .markdown .hljs {
  color: #24292e;
}

:root:not(.dark) .markdown .hljs-keyword,
:root:not(.dark) .markdown .hljs-selector-tag,
:root:not(.dark) .markdown .hljs-literal,
:root:not(.dark) .markdown .hljs-section,
:root:not(.dark) .markdown .hljs-link,
:root:not(.dark) .markdown .hljs-function .hljs-keyword,
:root:not(.dark) .markdown .hljs-doctag,
:root:not(.dark) .markdown .hljs-meta .hljs-keyword,
:root:not(.dark) .markdown .hljs-template-tag,
:root:not(.dark) .markdown .hljs-template-variable,
:root:not(.dark) .markdown .hljs-type {
  color: #b31d28;
}

:root:not(.dark) .markdown .hljs-string,
:root:not(.dark) .markdown .hljs-meta .hljs-string,
:root:not(.dark) .markdown .hljs-regexp {
  color: #032f62;
}

:root:not(.dark) .markdown .hljs-name,
:root:not(.dark) .markdown .hljs-quote,
:root:not(.dark) .markdown .hljs-selector-pseudo,
:root:not(.dark) .markdown .hljs-bullet,
:root:not(.dark) .markdown .hljs-addition,
:root:not(.dark) .markdown .hljs-symbol {
  color: #1a6f30;
}

:root:not(.dark) .markdown .hljs-attr,
:root:not(.dark) .markdown .hljs-attribute,
:root:not(.dark) .markdown .hljs-meta,
:root:not(.dark) .markdown .hljs-number,
:root:not(.dark) .markdown .hljs-operator,
:root:not(.dark) .markdown .hljs-selector-attr,
:root:not(.dark) .markdown .hljs-selector-class,
:root:not(.dark) .markdown .hljs-selector-id,
:root:not(.dark) .markdown .hljs-variable {
  color: #005cc5;
}

:root:not(.dark) .markdown .hljs-title,
:root:not(.dark) .markdown .hljs-title.class_,
:root:not(.dark) .markdown .hljs-title.function_ {
  color: #6f42c1;
}

:root:not(.dark) .markdown .hljs-built_in,
:root:not(.dark) .markdown .hljs-class .hljs-title {
  color: #8a4500;
}

:root:not(.dark) .markdown .hljs-comment,
:root:not(.dark) .markdown .hljs-formula {
  color: #586069;
}

:root:not(.dark) .markdown .hljs-deletion {
  color: #b31d28;
  background-color: #ffeef0;
}

:root:not(.dark) .markdown .hljs-addition {
  color: #1a6f30;
  background-color: #f0fff4;
}

:root:not(.dark) .markdown .hljs-punctuation,
:root:not(.dark) .markdown .hljs-params {
  color: #24292e;
}