/*
 * A turn's text: the prose styles the chat grammar renders into.
 *
 * `.turn-text` is a user turn and `.md` is what `Markdown.tsx` builds; `.hljs`
 * is `CodeBlock.tsx`'s highlighting, keyed on the syntax tokens the design
 * layer's themes supply. Every value here is a token or a ratio, so a look
 * moving the prose size from 14px to 18.5px moves all of it together.
 */

/* The leading a look derives, computed on the element that sets the text.
 *
 * A look states the ratio it wants at a 720px measure and the slope per 100px
 * away from it (`zkit-design/src/leading.ts`). `--measure-n` is the measure
 * the text actually gets, a unitless number `measure.ts` writes on the root,
 * or one a container sets for itself, which is the KB view's 340 below 767px.
 * A `var()` inside a custom property is substituted on the element carrying
 * the declaration, so a calc written on `:root` reads root's own
 * `--measure-n` and every descendant inherits that one resolved number. Here
 * the measure is the text's own, and a value set on the text or anywhere
 * above it participates.
 *
 * Both rules below read `--prose-leading`, and the KB article carries `.md`
 * and `.kb-doc-content` on one element, so the derivation is written once.
 */
.turn-text,
.md {
  --prose-leading: calc(
    var(--leading-720) + var(--leading-slope) * (var(--measure-n, 720) - 720) /
      100
  );
}

/* A user turn: the answer's type exactly, minus the markdown. Sized down, it
   read as a caption on somebody else's writing, which is the wrong claim
   about whose page this is. */
.turn-text {
  font-family: var(--font-prose);
  font-optical-sizing: auto;
  font-variation-settings: var(--prose-variation, normal);
  font-size: var(--prose-size);
  font-weight: var(--prose-weight);
  line-height: var(--prose-leading);
  letter-spacing: var(--prose-tracking);
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.md {
  font-family: var(--font-prose);
  font-optical-sizing: auto;
  /* The hook a look uses to reach a variable face's own axes. Only Manuscript
     sets it today; everything else resolves to `normal` and pays nothing. */
  font-variation-settings: var(--prose-variation, normal);
  font-size: var(--prose-size);
  font-weight: var(--prose-weight);
  line-height: var(--prose-leading);
  letter-spacing: var(--prose-tracking);
  overflow-wrap: break-word;
}

.md > :first-child {
  margin-top: 0;
}
.md > :last-child {
  margin-bottom: 0;
}

.md p,
.md ul,
.md ol,
.md blockquote {
  margin: 0.9em 0;
}

/* The measure is the column now -- `--measure` resolves to 100% -- so text
 * runs to the same right edge the code blocks and tables do and the two
 * margins match. The cap stays as a hook rather than being deleted: setting
 * `--measure` back to a `ch` value re-narrows every text block at once, which
 * is the one thing that would be tedious to reconstruct. */
.md p,
.md li,
.md blockquote,
.md h1,
.md h2,
.md h3,
.md h4 {
  max-width: var(--measure);
}

.md h1,
.md h2,
.md h3,
.md h4 {
  font-family: var(--font-ui);
  font-weight: 560;
  letter-spacing: -0.012em;
  line-height: 1.3;
  margin: 1.7em 0 0.6em;
}
/* On the φ scale: h1 a golden step up, h2 half a step, h3 and h4 the body
   size with weight and colour doing the work. Before 2026-09-07 these were
   1.3, 1.15, 1.03 and 0.95em, four sizes a reader could not tell apart. */
.md h1 {
  font-size: var(--prose-s2);
  line-height: 1.2;
}
.md h2 {
  font-size: var(--prose-s1);
}
.md h3 {
  font-size: var(--prose-s0);
}
.md h4 {
  font-size: var(--prose-s0);
  color: var(--fg-2);
}

.md a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2.5px;
  text-decoration-color: var(--accent-line);
  transition: text-decoration-color 140ms var(--ease-out);
}
.md a:hover {
  text-decoration-color: var(--accent);
}

.md strong {
  font-weight: 620;
}

/* Markers hang in the gutter, so list text starts on the column's own left
 * edge, exactly where the paragraph above it starts. */
.md ul,
.md ol {
  padding-left: 0;
  list-style-position: outside;
}
.md ul {
  list-style: none;
}
.md ol {
  list-style: decimal;
  margin-left: 0;
}
.md ul > li {
  position: relative;
}
.md ul > li::before {
  content: "";
  position: absolute;
  left: -0.95em;
  top: 0.68em;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--accent-line);
}
.md ul ul > li::before {
  background: transparent;
  border: 1px solid var(--accent-line);
}
.md li {
  margin: 0.35em 0;
}
.md li > ul,
.md li > ol {
  margin: 0.35em 0;
  padding-left: 1.2em;
}
.md ol > li::marker {
  color: var(--fg-3);
  font-family: var(--font-ui);
  font-size: 0.8em;
}

.md li.task-list-item {
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 0.55em;
}
.md li.task-list-item::before {
  display: none;
}
.md li.task-list-item input {
  accent-color: var(--accent);
}

/* The rule hangs in the gutter; the quoted text keeps the column's edge. */
.md blockquote {
  border-left: 2px solid var(--accent-line);
  margin-left: calc(-1 * var(--bleed));
  padding-left: calc(var(--bleed) - 2px);
  color: var(--fg-2);
  font-style: italic;
}

/* A quotation and its source (the kb's markdown makes one of a quote whose
 * last paragraph starts with a dash). The quote keeps its own look; the
 * source sits under it at the measure's right edge, upright, a step smaller,
 * in the secondary colour, with the dash typeset rather than typed. */
.md figure.quote {
  margin: 1.4em 0;
  max-width: var(--measure);
}
.md figure.quote > blockquote {
  margin: 0;
}
.md figure.quote > figcaption {
  margin-top: 0.5em;
  text-align: right;
  font-size: 0.9em;
  color: var(--fg-2);
}
.md figure.quote > figcaption::before {
  content: "\2014\2009";
}

.md hr {
  border: 0;
  height: 1px;
  background: var(--hairline);
  margin: 2em 0;
}

.md table {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: var(--text--2);
  line-height: var(--leading-body);
  letter-spacing: 0;
  margin: 1.3em 0;
  max-width: 100%;
}
.md thead th {
  color: var(--fg-2);
  font-weight: 560;
  border-bottom: 1px solid var(--hairline-strong);
}
.md th,
.md td {
  padding: 0.5em 1.2em 0.5em 0;
  text-align: left;
  white-space: nowrap;
}
.md tbody tr + tr td {
  border-top: 1px solid var(--hairline);
}

.md :not(pre) > code {
  font-family: var(--font-mono);
  font-size: 0.82em;
  color: var(--accent);
  background: var(--accent-tint);
  border-radius: 4px;
  padding: 0.12em 0.34em;
  white-space: break-spaces;
}

.md pre {
  margin: 0;
}
.md pre code {
  font-family: var(--font-mono);
  font-size: var(--code-size);
  line-height: 1.65;
  letter-spacing: 0;
  display: block;
  padding: 0.95rem var(--bleed);
  overflow-x: auto;
  color: var(--fg);
}

/* A warm highlight theme, written against the tokens. highlight.js's default
 * is cold and would fight every other colour on the page. */
.hljs-comment,
.hljs-quote {
  color: var(--fg-3);
  font-style: italic;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-doctag,
.hljs-meta {
  color: var(--syn-key);
}
.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-template-tag {
  color: var(--syn-str);
}
.hljs-number,
.hljs-symbol,
.hljs-bullet {
  color: var(--syn-num);
}
.hljs-title,
.hljs-section,
.hljs-name,
.hljs-title.function_ {
  color: var(--syn-fn);
}
.hljs-attr,
.hljs-attribute,
.hljs-variable,
.hljs-template-variable,
.hljs-property {
  color: var(--syn-attr);
}
.hljs-type,
.hljs-built_in,
.hljs-class .hljs-title,
.hljs-title.class_ {
  color: var(--syn-type);
}
.hljs-deletion {
  color: var(--danger);
}
.hljs-emphasis {
  font-style: italic;
}
.hljs-strong {
  font-weight: 600;
}

/* The streaming mark rides the end of the last block, so nothing jumps when
 * the next token lands. A soft pulsing dot, not a spinner. */
.streaming .md > :last-child::after,
.streaming-dot::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 0.3em;
  vertical-align: baseline;
  border-radius: 999px;
  background: var(--accent);
  animation: var(--animate-pulse-soft);
}

@media (prefers-reduced-motion: reduce) {
  .streaming .md > :last-child::after,
  .streaming-dot::after {
    animation: none;
    opacity: 0.6;
  }
}

/* `.skeleton` was here, and is now `.ui-skeleton` in `src/zkit-ui/build.ts`: it was
   the one component style living among the tokens, and the primitives layer is
   where a component style goes. */