/* typeset.css — shadcn/typeset (July 2026), ported for this static site.
   One file that styles every HTML/markdown element inside a `typeset`
   container. No package, no config layer: the file lives in the project —
   edit it directly when you need to.

   The three controls, per container or per preset:
     --typeset-size     base font size (everything inside scales in em)
     --typeset-leading  body line-height
     --typeset-flow     vertical rhythm between blocks

   Streaming-stable by construction: every block spaces itself with its OWN
   margin-block-start, so a new block arriving never makes earlier blocks
   switch margins or styles. Opt a component out with `not-typeset` or
   `data-not-typeset`. Colors come from the site tokens, so both themes are
   covered for free. All selectors are :where()-wrapped (zero specificity) —
   any project rule wins a conflict. */

.typeset {
  --typeset-size: 1rem;
  --typeset-leading: 1.7;
  --typeset-flow: 1.25em;
  font-size: var(--typeset-size);
  line-height: var(--typeset-leading);
  color: var(--muted);
  font-variant-numeric: oldstyle-nums; /* prose digits blend with lowercase */
}

/* ---- presets — tune the rhythm per context --------------------------------- */

.typeset-docs {
  --typeset-size: 14.5px;
  --typeset-leading: 1.7;
  --typeset-flow: 1.5em;
}

/* ---- flow: own-top-margin rhythm ------------------------------------------- */

.typeset
  :where(p, ul, ol, dl, pre, table, blockquote, figure, hr, h1, h2, h3, h4, h5, h6):not(
    :where(.not-typeset, .not-typeset *, [data-not-typeset], [data-not-typeset] *)
  ) {
  margin-block: 0;
}
.typeset
  :where(* + p, * + ul, * + ol, * + dl, * + pre, * + table, * + blockquote, * + figure, * + hr):not(
    :where(.not-typeset, .not-typeset *, [data-not-typeset], [data-not-typeset] *)
  ) {
  margin-block-start: var(--typeset-flow);
}
.typeset
  :where(* + h1, * + h2, * + h3, * + h4, * + h5, * + h6):not(
    :where(.not-typeset, .not-typeset *, [data-not-typeset], [data-not-typeset] *)
  ) {
  margin-block-start: calc(var(--typeset-flow) * 1.6);
}
/* a heading hands off tightly to what it introduces */
.typeset
  :where(h1 + *, h2 + *, h3 + *, h4 + *, h5 + *, h6 + *):not(
    :where(.not-typeset, .not-typeset *, [data-not-typeset], [data-not-typeset] *)
  ) {
  margin-block-start: calc(var(--typeset-flow) * 0.5);
}

/* ---- headings ---------------------------------------------------------------- */

.typeset :where(h1, h2, h3, h4, h5, h6):not(:where(.not-typeset, .not-typeset *, [data-not-typeset], [data-not-typeset] *)) {
  color: var(--ink);
  font-weight: 620;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.typeset :where(h1):not(:where(.not-typeset, .not-typeset *, [data-not-typeset], [data-not-typeset] *)) { font-size: 2em; line-height: 1.15; }
.typeset :where(h2):not(:where(.not-typeset, .not-typeset *, [data-not-typeset], [data-not-typeset] *)) { font-size: 1.5em; line-height: 1.25; }
.typeset :where(h3):not(:where(.not-typeset, .not-typeset *, [data-not-typeset], [data-not-typeset] *)) { font-size: 1.2em; line-height: 1.35; }
.typeset :where(h4, h5, h6):not(:where(.not-typeset, .not-typeset *, [data-not-typeset], [data-not-typeset] *)) { font-size: 1.05em; line-height: 1.4; }

/* ---- body copy ----------------------------------------------------------------- */

.typeset :where(p, li, dd):not(:where(.not-typeset, .not-typeset *, [data-not-typeset], [data-not-typeset] *)) {
  max-width: 68ch;
  text-wrap: pretty;
}
.typeset :where(strong, b):not(:where(.not-typeset, .not-typeset *, [data-not-typeset], [data-not-typeset] *)) {
  color: var(--ink);
  font-weight: 560;
}
.typeset :where(a):not(:where(.not-typeset, .not-typeset *, [data-not-typeset], [data-not-typeset] *)) {
  color: var(--signal-strong);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: auto;
}
.typeset :where(small):not(:where(.not-typeset, .not-typeset *, [data-not-typeset], [data-not-typeset] *)) {
  font-size: 0.85em;
  color: var(--faint);
}

/* ---- lists ----------------------------------------------------------------------- */

.typeset :where(ul, ol):not(:where(.not-typeset, .not-typeset *, [data-not-typeset], [data-not-typeset] *)) {
  padding-inline-start: 24px;
}
.typeset :where(li + li):not(:where(.not-typeset, .not-typeset *, [data-not-typeset], [data-not-typeset] *)) {
  margin-block-start: calc(var(--typeset-flow) * 0.375);
}
.typeset :where(li > ul, li > ol):not(:where(.not-typeset, .not-typeset *, [data-not-typeset], [data-not-typeset] *)) {
  margin-block-start: calc(var(--typeset-flow) * 0.375);
}
.typeset :where(ul > li)::marker { color: var(--signal); }
.typeset :where(ol > li)::marker {
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.typeset :where(dt):not(:where(.not-typeset, .not-typeset *, [data-not-typeset], [data-not-typeset] *)) {
  color: var(--ink);
  font-weight: 560;
}

/* ---- code -------------------------------------------------------------------------- */

.typeset :where(code, kbd, samp):not(:where(.not-typeset, .not-typeset *, [data-not-typeset], [data-not-typeset] *)) {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-variant-numeric: lining-nums slashed-zero;
}
.typeset :where(:not(pre) > code):not(:where(.not-typeset, .not-typeset *, [data-not-typeset], [data-not-typeset] *)) {
  background: var(--panel-raised);
  border-radius: 6px;
  padding: 0 4px;
}
.typeset :where(kbd):not(:where(.not-typeset, .not-typeset *, [data-not-typeset], [data-not-typeset] *)) {
  background: var(--panel);
  border: 1px solid var(--panel-edge-strong);
  border-radius: 6px;
  padding: 0 4px;
  box-shadow: var(--shadow);
}
.typeset :where(pre):not(:where(.not-typeset, .not-typeset *, [data-not-typeset], [data-not-typeset] *)) {
  background: var(--stage-bg);
  border: 1px solid var(--panel-edge);
  border-radius: 12px;
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 0.88em;
  line-height: 1.7;
  overflow-x: auto;
}
.typeset :where(pre code):not(:where(.not-typeset, .not-typeset *, [data-not-typeset], [data-not-typeset] *)) {
  background: none;
  border-radius: 0;
  padding: 0;
  font-size: 1em;
}

/* ---- tables --------------------------------------------------------------------------- */

.typeset :where(table):not(:where(.not-typeset, .not-typeset *, [data-not-typeset], [data-not-typeset] *)) {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94em;
  font-variant-numeric: tabular-nums; /* data columns line up */
  display: block;
  overflow-x: auto; /* narrow screens scroll the table, never the page */
}
.typeset :where(th):not(:where(.not-typeset, .not-typeset *, [data-not-typeset], [data-not-typeset] *)) {
  text-align: left;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.78em;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.typeset :where(th, td):not(:where(.not-typeset, .not-typeset *, [data-not-typeset], [data-not-typeset] *)) {
  padding: 8px 12px;
  border-bottom: 1px solid var(--panel-edge);
}
.typeset :where(td code):not(:where(.not-typeset, .not-typeset *, [data-not-typeset], [data-not-typeset] *)) {
  white-space: nowrap;
}

@media (min-width: 700px) {
  .typeset :where(table):not(:where(.not-typeset, .not-typeset *, [data-not-typeset], [data-not-typeset] *)) {
    display: table;
    overflow-x: visible;
  }
}

/* ---- quotes, rules, figures -------------------------------------------------------------- */

.typeset :where(blockquote):not(:where(.not-typeset, .not-typeset *, [data-not-typeset], [data-not-typeset] *)) {
  border-inline-start: 2px solid var(--signal);
  padding-inline-start: 16px;
  color: var(--ink);
}
.typeset :where(hr):not(:where(.not-typeset, .not-typeset *, [data-not-typeset], [data-not-typeset] *)) {
  border: 0;
  border-top: 1px solid var(--panel-edge);
}
.typeset :where(img, video):not(:where(.not-typeset, .not-typeset *, [data-not-typeset], [data-not-typeset] *)) {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}
.typeset :where(figcaption):not(:where(.not-typeset, .not-typeset *, [data-not-typeset], [data-not-typeset] *)) {
  margin-block-start: calc(var(--typeset-flow) * 0.375);
  font-size: 0.85em;
  color: var(--faint);
}