/* =====================================================================
   Markdown / Prism fix for themes/classic
   ---------------------------------------------------------------------
   1) In assets/tailwind.css RENAME the tag-pill component selector:
        .tag { ... }        ->   .tag-chip { ... }
        .tag:hover { ... }  ->   .tag-chip:hover { ... }
      (templates now use class="tag-chip")

   2) APPEND everything below to the END of assets/tailwind.css,
      OUTSIDE any @layer block (unlayered rules beat Tailwind's
      layered ones and sit at the same level as prism.css).
   Then rebuild:  npx @tailwindcss/cli -i assets/tailwind.css -o assets/css/style.css --minify
   ===================================================================== */

/* --- Prism tokens must never pick up theme component styles ------------
   Prism wraps HTML tags as <span class="token tag">, attribute names as
   "token attr-name", etc. Any global .tag / .badge / .label / .number
   component would otherwise turn them into pills. */
pre[class*="language-"] .token,
code[class*="language-"] .token {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font: inherit;
  line-height: inherit;
  white-space: inherit;
  text-decoration: none;
}

/* --- Let Prism own fenced code blocks inside .prose --------------------- */
.prose :where(pre[class*="language-"]) {
  margin: 1.5em 0;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.7;
  tab-size: 2;
}
.prose :where(pre code),
.prose :where(pre[class*="language-"] code) {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  white-space: pre;
}
/* typography plugin adds back-ticks around <code>; never inside <pre> */
.prose :where(pre code)::before,
.prose :where(pre code)::after { content: none; }

/* inline `code` (not in pre) – readable in light & dark */
.prose :where(:not(pre) > code) {
  padding: 0.15em 0.4em;
  border-radius: 0.375rem;
  background: var(--color-surface-2, rgb(0 0 0 / .06));
  font-size: 0.875em;
  font-weight: 500;
}
.prose :where(:not(pre) > code)::before,
.prose :where(:not(pre) > code)::after { content: none; }