/* TB-84: the markdown content of every docs page, in one place.
 *
 * docs.css (side-less LuaXE docs) and module-docs.css (the framed module README)
 * used to carry two copies of these rules, and neither matched the rest of the
 * site. Every value below is taken from the site itself: tailwind.config.js,
 * src/components/CodeBlock.astro, src/lib/ui.ts, src/components/Readme.astro,
 * src/components/home/* and the banners on src/pages/module/[module]/index.astro.
 *
 * Sheets that render a docs page load this one and then override only the
 * variables whose surface differs (module-docs.css does that for the framed
 * README, which sits on a gray-800 card instead of the gray-900 page).
 */
:root {
  /* gray-900 page, gray-800 surface, gray-700 border (tailwind.config.js) */
  --md-text: #e9e9ec;
  --md-heading: #ffffff;
  --md-muted: #92959f;
  --md-link: #c084fc;
  --md-link-hover: #d8b4fe;
  --md-border: #293041;
  --md-border-strong: #434959;
  --md-panel: rgba(41, 48, 65, 0.4);
  --md-th-bg: #293041;
  --md-row-alt: rgba(41, 48, 65, 0.4);
  --md-code-bg: rgba(0, 0, 0, 0.4);
  --md-code-border: #293041;
  --md-code-text: #e9e9ec;
  --md-inline-code: #fde68a;
  --md-inline-code-bg: rgba(41, 48, 65, 0.6);
  --md-label: #777c87;
  /* rounded-xl for blocks and tables, rounded-md for the small chips */
  --md-radius: 0.75rem;
  --md-radius-sm: 0.375rem;
  --md-font: Urbanist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  --md-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

.markdown-section {
  color: var(--md-text);
  font-family: var(--md-font);
  line-height: 1.625;
  margin: 0 auto;
  max-width: 80%;
  /* a table or a pre inside must never widen the column */
  min-width: 0;
  overflow-wrap: break-word;
  padding: 30px 15px 40px 15px;
  position: relative;
}
.markdown-section > * {
  box-sizing: border-box;
  font-size: inherit;
}
.markdown-section > :first-child {
  margin-top: 0 !important;
}
.markdown-section p,
.markdown-section ul,
.markdown-section ol {
  line-height: 1.625;
}
.markdown-section ul,
.markdown-section ol {
  padding-left: 1.5rem;
}
.markdown-section figure,
.markdown-section p {
  margin: 1.2em 0;
}

.markdown-section h1,
.markdown-section h2,
.markdown-section h3,
.markdown-section h4,
.markdown-section h5,
.markdown-section h6,
.markdown-section strong {
  color: var(--md-heading);
  font-weight: 700;
  line-height: 1.3;
}
.markdown-section h1 {
  font-size: 2rem;
  margin: 0 0 1rem;
}
.markdown-section h2 {
  border-bottom: 1px solid var(--md-border);
  font-size: 1.75rem;
  margin: 45px 0 0.8rem;
  padding-bottom: 0.5rem;
}
.markdown-section h3 {
  font-size: 1.5rem;
  margin: 40px 0 0.6rem;
}
.markdown-section h4 {
  font-size: 1.25rem;
  margin: 2em 0 0.5em;
}
.markdown-section h5 {
  font-size: 1rem;
  margin: 2em 0 0.5em;
}
.markdown-section h6 {
  color: var(--md-muted);
  font-size: 1rem;
  margin: 2em 0 0.5em;
}

.markdown-section a {
  color: var(--md-link);
  font-weight: 600;
  text-decoration: none;
}
.markdown-section a:hover {
  color: var(--md-link-hover);
  text-decoration: underline;
}

.markdown-section em {
  font-style: italic;
}
.markdown-section hr {
  border: none;
  border-bottom: 1px solid var(--md-border);
  margin: 2em 0;
}
.markdown-section iframe {
  border: 1px solid var(--md-border);
  margin: 1em 0;
  /* fix horizontal overflow on iOS Safari */
  width: 1px;
  min-width: 100%;
}

/* ---- tables: the same shapes as the cards on the home page ----
 * A wide table has to scroll inside the content column instead of stretching
 * the page, and a table element cannot be its own scroll container, so
 * docs-markdown.js wraps each rendered table in a .md-table-scroll box; the
 * border, the radius and the scrolling live on that box.
 *
 * The box is capped at the column width and the wrapped table fills it
 * (width:auto + min-width:100%): a prose table is free to wrap its cells and
 * only overflows when its min-content width cannot fit the column (many
 * columns, or cells marked nowrap), and then the box scrolls. Sizing the table
 * to its content instead (width:max-content) made every prose table refuse to
 * wrap, so it scrolled on a desktop with room to spare and never used the full
 * column width. The wrapped table has to clear max-width: max-width caps the
 * used width, so leaving it on would clamp the table to the box and leave
 * nothing to scroll (a wide table would be squeezed instead of scrolling).
 * A bare table (no JS yet) keeps max-width:100% so it stays in the column and
 * wraps rather than stretching the page.
 */
.markdown-section .md-table-scroll {
  border: 1px solid var(--md-border);
  border-radius: var(--md-radius);
  margin-bottom: 1.5rem;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.markdown-section table {
  /* separate, so the radius and the borders are ours to place */
  border-collapse: separate;
  border-spacing: 0;
  max-width: 100%;
  width: max-content;
}
.markdown-section .md-table-scroll > table {
  margin: 0;
  max-width: none;
  min-width: 100%;
  width: auto;
}
.markdown-section th,
.markdown-section td {
  border-bottom: 1px solid var(--md-border);
  border-right: 1px solid var(--md-border);
  padding: 0.5rem 1rem;
  vertical-align: top;
}
/* th is center by default; force it left only where the markdown gave no
 * alignment. A plain `th { text-align: left }` would beat the presentational
 * hint marked emits for | :---: | and | ---: | columns. */
.markdown-section th:not([align]),
.markdown-section td:not([align]) {
  text-align: left;
}
/* the scroll box draws the outside edge, so the last row and column drop theirs */
.markdown-section tr:last-child td {
  border-bottom: none;
}
.markdown-section th:last-child,
.markdown-section td:last-child {
  border-right: none;
}
.markdown-section thead th {
  background-color: var(--md-th-bg);
  color: var(--md-heading);
  font-weight: 600;
  white-space: nowrap;
}
.markdown-section tbody tr:nth-child(2n) {
  background-color: var(--md-row-alt);
}
.markdown-section table code {
  font-size: 0.85em;
}

/* ---- code: CodeBlock.astro, black/40 on a gray-800 border, rounded-xl ---- */
.markdown-section code,
.markdown-section pre,
.markdown-section output::after {
  font-family: var(--md-mono);
}
.markdown-section code {
  background-color: var(--md-inline-code-bg);
  border-radius: var(--md-radius-sm);
  color: var(--md-inline-code);
  font-size: 0.875em;
  margin: 0 2px;
  overflow-wrap: anywhere;
  padding: 0.125rem 0.375rem;
  white-space: pre-wrap;
}
.markdown-section pre,
.markdown-section output {
  margin: 1.2em 0;
  position: relative;
}
.markdown-section pre {
  background-color: var(--md-code-bg);
  border: 1px solid var(--md-code-border);
  border-radius: var(--md-radius);
  line-height: 1.625;
  overflow: auto;
  padding: 0.75rem 1rem;
  white-space: pre;
  word-wrap: normal;
}
.markdown-section pre > code,
.markdown-section output {
  background-color: transparent;
  border: 0;
  border-radius: 0;
  color: var(--md-code-text);
  display: block;
  font-size: 0.875rem;
  line-height: inherit;
  margin: 0;
  max-width: inherit;
  overflow: visible;
  padding: 0;
  white-space: inherit;
}
.markdown-section pre > code,
.markdown-section output::after {
  -moz-osx-font-smoothing: initial;
  -webkit-font-smoothing: initial;
}
.markdown-section output {
  border: 1px solid var(--md-code-border);
  border-radius: var(--md-radius);
  padding: 0.75rem 1rem;
}
.markdown-section output > :first-child {
  margin-top: 0;
}
.markdown-section output > :last-child {
  margin-bottom: 0;
}
.markdown-section code::after,
.markdown-section code::before,
.markdown-section output::after,
.markdown-section output::before {
  letter-spacing: 0.05rem;
}
/* the language label, styled like the CodeBlock title */
.markdown-section pre::after,
.markdown-section output::after {
  color: var(--md-label);
  content: attr(data-lang);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0 0 0.5rem 0.75rem;
  position: absolute;
  right: 0;
  text-align: right;
  top: 0;
}
.markdown-section pre:has(> code[data-lang]) {
  padding-top: 2rem;
}

/* ---- blockquote and the !> / ?> callouts, the banners and the badge ---- */
.markdown-section blockquote {
  background-color: var(--md-panel);
  border-left: 3px solid var(--md-border-strong);
  border-radius: 0 var(--md-radius) var(--md-radius) 0;
  color: var(--md-muted);
  margin: 2em 0;
  padding: 0.75rem 1rem;
}
.markdown-section blockquote p {
  margin-left: 0;
}
.markdown-section p.tip,
.markdown-section p.warn {
  border-radius: var(--md-radius);
  margin: 2em 0;
  padding: 1rem;
  position: relative;
}
.markdown-section p.tip {
  background-color: rgba(120, 53, 15, 0.2);
  border: 1px solid #92400e;
  color: #fde68b;
}
.markdown-section p.warn {
  background-color: rgba(76, 29, 149, 0.3);
  border: 1px solid #7e22ce;
  color: #d8b4fe;
}
.markdown-section p.tip code,
.markdown-section p.warn code {
  background-color: rgba(0, 0, 0, 0.3);
}
.markdown-section ul.task-list > li {
  list-style-type: none;
}

/* ---- prism ----
 * The palette is docsify's own, moved here wholesale so the three docs views
 * highlight alike. Only the tokens that were unreadable on a dark page change:
 * comments, punctuation and keywords/function names, the three that the home
 * page CodeBlock also renders in gray-500 / gray-400 / purple-400. */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: var(--md-label);
}
.token.namespace {
  opacity: 0.7;
}
.token.punctuation {
  color: var(--md-muted);
}
.token.boolean,
.token.number,
.token.property {
  color: #c76b29;
}
.token.tag,
.token.attr-name {
  color: #2973b7;
}
.token.string,
.token.attr-value,
.token.control,
.token.directive,
.token.unit {
  color: #42b983;
}
.token.selector {
  color: #6679cc;
}
.token.entity,
.token.url,
.token.language-css .token.string,
.token.style .token.string {
  color: #22a2c9;
}
.token.keyword,
.token.function {
  color: var(--md-link);
}
.token.statement,
.token.regex,
.token.atrule {
  color: #22a2c9;
}
.token.placeholder,
.token.variable {
  color: #3d8fd1;
}
.token.deleted {
  text-decoration: line-through;
}
.token.inserted {
  border-bottom: 1px dotted var(--md-border-strong);
  text-decoration: none;
}
.token.italic {
  font-style: italic;
}
.token.important,
.token.bold {
  font-weight: bold;
}
.token.important {
  color: #ff8a80;
}
.token.entity {
  cursor: help;
}
code .token {
  -moz-osx-font-smoothing: initial;
  -webkit-font-smoothing: initial;
  min-height: 1.5rem;
  position: relative;
  left: auto;
}

@media screen and (max-width: 768px) {
  .markdown-section {
    max-width: 100%;
    padding: 1.5rem 1rem 2.5rem;
  }
}