/* Markdown render additions: syntax tokens, task lists, line numbers, wrap
   toggle, table alignment/scroll. Colors derive from the site tokens via
   color-mix so both dark paths theme automatically. */

/* --------------------------------------------------------- syntax tokens */
.msg-body pre code .tok-kw,
.codeblock .tok-kw { color: color-mix(in oklab, var(--accent) 78%, var(--fg)); font-weight: 500; }
.msg-body pre code .tok-str,
.codeblock .tok-str { color: var(--up); }
.msg-body pre code .tok-num,
.codeblock .tok-num { color: var(--unstable); }
.msg-body pre code .tok-com,
.codeblock .tok-com { color: var(--muted); font-style: italic; }
.msg-body pre code .tok-fn,
.codeblock .tok-fn { color: color-mix(in oklab, var(--accent) 55%, var(--fg)); }
.msg-body pre code .tok-op,
.codeblock .tok-op { color: var(--fg-soft); }
.msg-body pre code .tok-type,
.codeblock .tok-type { color: color-mix(in oklab, var(--down) 70%, var(--fg)); }
.msg-body pre code .tok-attr,
.codeblock .tok-attr { color: var(--unstable); }

:root[data-theme="dark"] .tok-kw { color: color-mix(in oklab, var(--accent) 60%, #fff); }
:root[data-theme="dark"] .tok-str { color: #7ee2b8; }
:root[data-theme="dark"] .tok-num { color: #ffc48a; }
:root[data-theme="dark"] .tok-com { color: #71717d; }
:root[data-theme="dark"] .tok-fn { color: #9db2ff; }
:root[data-theme="dark"] .tok-op { color: #b8b8c2; }
:root[data-theme="dark"] .tok-type { color: #ff9a9a; }
:root[data-theme="dark"] .tok-attr { color: #ffc48a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tok-kw { color: color-mix(in oklab, var(--accent) 60%, #fff); }
  :root:not([data-theme="light"]) .tok-str { color: #7ee2b8; }
  :root:not([data-theme="light"]) .tok-num { color: #ffc48a; }
  :root:not([data-theme="light"]) .tok-com { color: #71717d; }
  :root:not([data-theme="light"]) .tok-fn { color: #9db2ff; }
  :root:not([data-theme="light"]) .tok-op { color: #b8b8c2; }
  :root:not([data-theme="light"]) .tok-type { color: #ff9a9a; }
  :root:not([data-theme="light"]) .tok-attr { color: #ffc48a; }
}

/* ----------------------------------------------------------- task lists */
li.md-task { list-style: none; margin-left: -1.1em; display: flex; align-items: baseline; gap: 8px; }
li.md-task input[type="checkbox"] { accent-color: var(--accent); flex: none; transform: translateY(1px); pointer-events: none; }
li.md-task.done { color: var(--muted); }
li.md-task.done > span { text-decoration: line-through; text-decoration-color: color-mix(in oklab, var(--muted) 60%, transparent); }

/* ------------------------------------------------------- strikethrough */
.msg-body del { color: var(--muted); }

/* --------------------------------------------------------- line numbers */
.msg-body pre code,
.codeblock code { counter-reset: codeline; }
pre.code-lines code .code-line {
  counter-increment: codeline;
  display: block;
  position: relative;
  padding-left: 3.1em;
}
pre.code-lines code .code-line::before {
  content: counter(codeline);
  position: absolute;
  left: 0;
  width: 2.4em;
  text-align: right;
  color: var(--muted);
  opacity: 0.55;
  font-size: 0.85em;
  user-select: none;
  -webkit-user-select: none;
}

/* --------------------------------------------------------- wrap toggle */
pre.is-wrapped,
pre.is-wrapped code { white-space: pre-wrap !important; overflow-wrap: anywhere; }
pre.is-wrapped code .code-line { padding-left: 0; }
button.codewrap,
button.codelines,
button.codepreview {
  font: inherit;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  min-height: 0;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--card-2);
  color: var(--fg-soft);
  cursor: pointer;
  transition: color var(--pg-dur, 140ms), border-color var(--pg-dur, 140ms);
}
button.codewrap:hover,
button.codelines:hover { color: var(--fg); border-color: var(--fg-soft); }
button.codewrap[aria-pressed="true"],
button.codelines[aria-pressed="true"] {
  color: var(--accent);
  border-color: color-mix(in oklab, var(--accent) 45%, transparent);
  background: var(--accent-soft);
}
button.codepreview.is-active {
  color: var(--accent);
  border-color: color-mix(in oklab, var(--accent) 45%, transparent);
  background: var(--accent-soft);
}
.codepreview-pane {
  margin: 6px 0 0;
  padding: 10px;
  background: color-mix(in oklab, var(--card) 90%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 8px);
  overflow: auto;
}
.codepreview-frame {
  width: 100%;
  min-height: 240px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
}
.codepreview-svg {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
}
.codepreview-svg svg { max-width: 100%; height: auto; }

/* -------------------------------------------------------------- tables */
.md-align-right { text-align: right; }
.md-align-center { text-align: center; }
.tbl-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }

/* --------------------------------------------------------------- print */
@media print {
  button.codewrap, button.codelines { display: none; }
  .tok-kw, .tok-str, .tok-num, .tok-com, .tok-fn, .tok-op, .tok-type, .tok-attr { color: inherit !important; }
}