/* Custom overrides that are safe to maintain outside the minified Tailwind output. */

/*
  Fix: Tailwind Typography (`.prose`) uses CSS variables for colors.
  The theme currently switches many elements to light text in dark mode,
  but list items / strong / table cells still use the *light* variables,
  resulting in very low contrast.

  Strategy: In dark mode, remap `--tw-prose-*` variables to their `--tw-prose-invert-*` counterparts.
  This keeps the behavior consistent for all typography elements (li/strong/table/etc).
*/
.prose:where([data-color-scheme="dark"], [data-color-scheme="dark"] *) {
  --tw-prose-body: var(--tw-prose-invert-body);
  --tw-prose-headings: var(--tw-prose-invert-headings);
  --tw-prose-lead: var(--tw-prose-invert-lead);
  --tw-prose-links: var(--tw-prose-invert-links);
  --tw-prose-bold: var(--tw-prose-invert-bold);
  --tw-prose-counters: var(--tw-prose-invert-counters);
  --tw-prose-bullets: var(--tw-prose-invert-bullets);
  --tw-prose-hr: var(--tw-prose-invert-hr);
  --tw-prose-quotes: var(--tw-prose-invert-quotes);
  --tw-prose-quote-borders: var(--tw-prose-invert-quote-borders);
  --tw-prose-captions: var(--tw-prose-invert-captions);
  --tw-prose-kbd: var(--tw-prose-invert-kbd);
  --tw-prose-kbd-shadows: var(--tw-prose-invert-kbd-shadows);
  --tw-prose-code: var(--tw-prose-invert-code);
  --tw-prose-pre-code: var(--tw-prose-invert-pre-code);
  --tw-prose-pre-bg: var(--tw-prose-invert-pre-bg);
  --tw-prose-th-borders: var(--tw-prose-invert-th-borders);
  --tw-prose-td-borders: var(--tw-prose-invert-td-borders);
}

/* Tables: respect editor alignment + match theme style */
article .prose {
  max-width: 100% !important;
}
.prose {
  --tc-table-border: #e5e7eb; /* gray-200 */
  --tc-table-head-bg: #f9fafb; /* gray-50 */
  --tc-table-row-alt-bg: #f3f4f6; /* gray-100 */
  --tc-table-row-hover-bg: #eef2ff; /* indigo-50-ish */
}
.prose:where([data-color-scheme="dark"], [data-color-scheme="dark"] *) {
  --tc-table-border: rgba(255, 255, 255, 0.16);
  --tc-table-head-bg: rgba(255, 255, 255, 0.06);
  --tc-table-row-alt-bg: rgba(255, 255, 255, 0.03);
  --tc-table-row-hover-bg: rgba(255, 255, 255, 0.06);
}

/* Keep tables readable on small screens */
/* Wrap tables in a scroll container so the table layout algorithm stays intact. */
.prose :where(.tc-table-wrap):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 2em 0;
  border: 1px solid var(--tc-table-border);
  border-radius: 0.75rem;
  background: transparent;
}
.prose :where(table):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  width: 100% !important;
  min-width: 100%;
  border-collapse: collapse;
  background: transparent;
}
.prose :where(.tc-table-wrap > table):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  margin: 0 !important;
}

/* Remove forced row borders from the generated CSS and restyle cells */
.prose :where(tr):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  border-width: 0 !important;
}

.prose :where(th, td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  padding: 0.75rem 0.875rem;
  border-color: var(--tc-table-border) !important;
  vertical-align: middle;
  text-align: left; /* default */
}

.prose :where(thead th):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  background: var(--tc-table-head-bg);
}

.prose :where(tbody tr:nth-child(even)):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  background: var(--tc-table-row-alt-bg);
}

.prose :where(tbody tr:hover):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  background: var(--tc-table-row-hover-bg);
}

/* Respect editor/markdown alignment attributes (these are overridden by theme CSS otherwise) */
.prose :where(th[align="left"], td[align="left"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  text-align: left;
}
.prose :where(th[align="center"], td[align="center"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  text-align: center;
}
.prose :where(th[align="right"], td[align="right"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  text-align: right;
}

/* Some editors output inline style instead of `align="..."` */
.prose :where(th[style*="text-align:center"], td[style*="text-align:center"], th[style*="text-align: center"], td[style*="text-align: center"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  text-align: center;
}
.prose :where(th[style*="text-align:right"], td[style*="text-align:right"], th[style*="text-align: right"], td[style*="text-align: right"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  text-align: right;
}
.prose :where(th[style*="text-align:left"], td[style*="text-align:left"], th[style*="text-align: left"], td[style*="text-align: left"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  text-align: left;
}

/* Strong emphasis: subtle "highlight tag" using theme accent (more refined than a flat neon pill) */
article .prose {
  --tc-accent-light: var(--color-lime-600); /* light mode accent */
  --tc-accent-dark: var(--color-lime-400); /* dark mode accent */

  /* Light mode: use dark-mode accent as bg, light-mode accent as fg */
  --tc-strong-fg: var(--tc-accent-light);
  --tc-strong-bg-1: rgba(163, 230, 53, 0.18); /* lime-400-ish */
  --tc-strong-bg-2: rgba(163, 230, 53, 0.10);
  --tc-strong-border: rgba(163, 230, 53, 0.28);
  --tc-strong-shadow: rgba(163, 230, 53, 0.18);
}
article .prose:where([data-color-scheme="dark"], [data-color-scheme="dark"] *) {
  /* Dark mode: inverse */
  --tc-strong-fg: var(--tc-accent-dark);
  --tc-strong-bg-1: rgba(101, 163, 13, 0.22); /* lime-600-ish */
  --tc-strong-bg-2: rgba(101, 163, 13, 0.14);
  --tc-strong-border: rgba(101, 163, 13, 0.30);
  --tc-strong-shadow: rgba(101, 163, 13, 0.20);
}

@supports (color: color-mix(in oklab, white, black)) {
  article .prose {
    --tc-strong-bg-1: color-mix(in oklab, var(--tc-accent-dark) 18%, transparent);
    --tc-strong-bg-2: color-mix(in oklab, var(--tc-accent-dark) 10%, transparent);
    --tc-strong-border: color-mix(in oklab, var(--tc-accent-dark) 32%, transparent);
    --tc-strong-shadow: color-mix(in oklab, var(--tc-accent-dark) 22%, transparent);
  }
  article .prose:where([data-color-scheme="dark"], [data-color-scheme="dark"] *) {
    --tc-strong-bg-1: color-mix(in oklab, var(--tc-accent-light) 20%, transparent);
    --tc-strong-bg-2: color-mix(in oklab, var(--tc-accent-light) 12%, transparent);
    --tc-strong-border: color-mix(in oklab, var(--tc-accent-light) 34%, transparent);
    --tc-strong-shadow: color-mix(in oklab, var(--tc-accent-light) 24%, transparent);
  }
}

article
  .prose
  :where(strong):not(
    :where(
      [class~="not-prose"],
      [class~="not-prose"] *,
      a strong,
      h1 strong,
      h2 strong,
      h3 strong,
      h4 strong,
      h5 strong,
      h6 strong,
      code strong,
      pre strong,
      kbd strong
    )
  ) {
  color: var(--tc-strong-fg) !important;
  background: linear-gradient(180deg, var(--tc-strong-bg-1), var(--tc-strong-bg-2));
  border: 1px solid var(--tc-strong-border);
  padding: 0.12em 0.44em;
  border-radius: 0.65rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 8px 18px -14px var(--tc-strong-shadow);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Inline code: match theme (pill, subtle border, auto dark/light) */
article .prose {
  --tc-inline-code-fg: var(--color-gray-800);
  --tc-inline-code-bg: rgba(148, 163, 184, 0.18); /* slate-ish */
  --tc-inline-code-border: rgba(148, 163, 184, 0.28);
}
article .prose:where([data-color-scheme="dark"], [data-color-scheme="dark"] *) {
  --tc-inline-code-fg: rgba(255, 255, 255, 0.9);
  --tc-inline-code-bg: rgba(255, 255, 255, 0.08);
  --tc-inline-code-border: rgba(255, 255, 255, 0.16);
}
@supports (color: color-mix(in oklab, white, black)) {
  article .prose {
    --tc-inline-code-bg: color-mix(in oklab, var(--color-gray-500) 14%, transparent);
    --tc-inline-code-border: color-mix(in oklab, var(--color-gray-500) 22%, transparent);
  }
  article .prose:where([data-color-scheme="dark"], [data-color-scheme="dark"] *) {
    --tc-inline-code-bg: color-mix(in oklab, var(--color-white) 10%, transparent);
    --tc-inline-code-border: color-mix(in oklab, var(--color-white) 18%, transparent);
  }
}

article
  .prose
  :where(code):not(
    :where(
      [class~="not-prose"],
      [class~="not-prose"] *,
      pre code,
      a code,
      h1 code,
      h2 code,
      h3 code,
      h4 code,
      h5 code,
      h6 code
    )
  ) {
  color: var(--tc-inline-code-fg) !important;
  background: var(--tc-inline-code-bg);
  border: 1px solid var(--tc-inline-code-border);
  padding: 0.12em 0.42em;
  border-radius: 0.55rem;
  font-weight: 500;
  font-size: 0.92em;
  line-height: 1.35;
  white-space: break-spaces;
  word-break: break-word;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}