/* SPDX-License-Identifier: CC0-1.0 */

/* skovmand default theme — "Typeset".
   A journal page: STIX Two Text throughout, amsthm-style environments (bold
   run-in label, italic statement, run-in "Proof." with a tombstone), small-caps
   apparatus for metadata, menus and backmatter labels. The renderer emits
   plain structure (see lib/frontend/Html_client.ml); everything visual —
   including the period after a taxon label — lives here. */

/* STIX Two Text italic — greek (variable weight 400–700) */
@font-face {
  font-display: swap;
  font-family: 'STIX Two Text';
  font-style: italic;
  font-weight: 400 700;
  src: url('fonts/stix-two-text-italic-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* STIX Two Text italic — latin-ext (variable weight 400–700) */
@font-face {
  font-display: swap;
  font-family: 'STIX Two Text';
  font-style: italic;
  font-weight: 400 700;
  src: url('fonts/stix-two-text-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* STIX Two Text italic — latin (variable weight 400–700) */
@font-face {
  font-display: swap;
  font-family: 'STIX Two Text';
  font-style: italic;
  font-weight: 400 700;
  src: url('fonts/stix-two-text-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* STIX Two Text — greek (variable weight 400–700) */
@font-face {
  font-display: swap;
  font-family: 'STIX Two Text';
  font-style: normal;
  font-weight: 400 700;
  src: url('fonts/stix-two-text-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* STIX Two Text — latin-ext (variable weight 400–700) */
@font-face {
  font-display: swap;
  font-family: 'STIX Two Text';
  font-style: normal;
  font-weight: 400 700;
  src: url('fonts/stix-two-text-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* STIX Two Text — latin (variable weight 400–700) */
@font-face {
  font-display: swap;
  font-family: 'STIX Two Text';
  font-style: normal;
  font-weight: 400 700;
  src: url('fonts/stix-two-text-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --ink: #1c1a17;
  --paper: #fbfaf6;
  --muted: #6b665d;
  --rule: #d9d4c8;
  --leaf-mark: #b4ada0; /* between --rule and --muted: a mark, not a hairline */
  --rule-soft: #e8e4da;
  --accent: #35547f;
  --accent-hover: #23385a;
  --tint: rgba(53, 84, 127, 0.06);
  --highlight: rgba(232, 200, 90, 0.22);
  --secondary: var(--muted);
  --background: var(--paper);
  --serif: "STIX Two Text", "Times New Roman", Times, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --content-gap: 15px;
  --radius: 3px;
  --measure: 720px;
  --rail: 200px;
  --gutter: 48px;
}

/* ---------- Base ---------- */

html {
  background: var(--paper);
}

body {
  margin: 0;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  text-align: justify;
  hyphens: auto;
  -webkit-font-smoothing: antialiased;
}

.katex {
  font-size: 1.08em !important;
}

math {
  font-size: 1.08em;
}

mrow:hover {
  background-color: var(--tint);
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.link {
  cursor: pointer;
}

.link.external {
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 0.15em;
}

.link.external:hover {
  text-decoration-color: currentColor;
}

p {
  margin: 0 0 0.9em;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  line-height: 1.2;
  margin: 0.5em 0 0;
  text-align: left;
}

h5, h6, p {
  margin-top: 0;
}

ul, ol {
  margin: 0 0 0.9em;
  padding-left: 1.6em;
}

ol li, ul li {
  margin-bottom: 0.3em;
}

ol {
  list-style-type: decimal;
}

ol li ol {
  list-style-type: lower-alpha;
}

ol li ol li ol {
  list-style-type: lower-roman;
}

blockquote {
  margin: 0 0 0.9em;
  padding-left: 1em;
  border-inline-start: 1px solid var(--rule);
  font-style: italic;
}

blockquote em {
  font-style: normal;
}

hr {
  margin: 1.4em 0;
  border: 0 none;
  border-top: 1px solid var(--rule);
  height: 0;
}

pre, img, .katex-display, section, center {
  overflow-y: hidden;
}

pre {
  border-radius: var(--radius);
  background-color: var(--tint);
  padding: 0.6em 0.8em;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.45;
  margin: 0 0 1em;
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  text-align: left;
}

code {
  border-radius: var(--radius);
  background-color: var(--tint);
  padding: 0.1em 0.3em;
  font-family: var(--mono);
  font-size: 0.82em;
}

pre code {
  background: transparent;
  padding: 0;
  font-size: inherit;
}

img {
  object-fit: cover;
  max-width: 100%;
}

figure {
  text-align: center;
  margin: 0 0 1em;
}

figcaption {
  font-style: italic;
  font-size: 0.9em;
  color: var(--muted);
  padding: 3px;
}

mark {
  background-color: var(--highlight);
}

table {
  margin-bottom: 1em;
  border-collapse: collapse;
}

th {
  text-align: left;
  font-weight: 700;
}

th, td {
  padding: 0.15em 15px;
  vertical-align: top;
}

address {
  display: inline;
  font-style: inherit;
}

.nowrap {
  white-space: nowrap;
}

.nocite {
  display: none;
}

.error, .info {
  border-radius: var(--radius);
  padding: 1pt 3pt 2pt;
  font-weight: 700;
  color: white;
}

.error {
  background-color: #a23a2e;
}

.info {
  background-color: var(--muted);
}

/* ---------- Page frame ---------- */

#main-wrapper {
  max-width: calc(var(--rail) + var(--gutter) + var(--measure) + var(--gutter) + 224px);
  margin: 0 auto;
  padding: 28px 24px 80px;
}

header.header {
  display: flex;
  align-items: baseline;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 10px;
  margin-bottom: 40px;
  min-height: 1.6em;
}

nav.nav {
  display: flex;
}

.logo {
  font-size: 15px;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.06em;
}

.logo a {
  color: var(--muted);
  text-decoration: none;
}

.logo a:hover {
  color: var(--ink);
}

#home-link.hidden {
  display: none;
}

a.docs-button {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4em 1em;
  font-size: 14px;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
  color: var(--muted);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  text-decoration: none;
}

/* The grid: left rail (menu, then contents) · text column · right margin
   (sidenotes). The article spans both rail rows so the contents can be sticky
   in the space below the menu. */

#grid-wrapper > article {
  max-width: var(--measure);
  position: relative;
}

#grid-wrapper > nav#side-menu,
#grid-wrapper > nav#toc {
  font-size: 15px;
}

nav#side-menu h1,
nav#toc h1 {
  font-size: 12px;
  font-weight: 400;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin: 6px 0 10px;
}

nav#side-menu ul,
nav#toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav#side-menu li {
  margin: 0 0 6px;
  font-size: 16px;
  font-style: italic;
}

nav#side-menu a {
  color: var(--ink);
}

nav#toc li {
  margin: 0 0 4px;
  color: var(--muted);
}

nav#toc li > ul {
  padding-left: 1em;
  margin-top: 4px;
}

nav#toc a.bullet {
  display: none;
}

nav#toc .link,
nav#toc a {
  color: var(--ink);
  text-decoration: none;
}

nav#toc .link:hover {
  color: var(--accent);
}

nav#toc .taxon {
  font-weight: 400;
  color: var(--ink);
}

/* In the contents the label is followed by the number, so the period goes
   after the number ("Definition 2.2. Markov prefibration"), not the label. */
nav#toc span.taxon::after {
  content: "";
}

nav#toc .section-number::before {
  content: " " counters(section-num, ".") ".";
}

@media only screen and (max-width: 999px) {
  #main-wrapper {
    padding: 16px 16px 60px;
  }

  header.header {
    margin-bottom: 24px;
  }

  #grid-wrapper > nav#side-menu,
  #grid-wrapper > nav#toc {
    display: none;
  }

  body {
    font-size: 17px;
  }
}

@media only screen and (min-width: 1000px) {
  #grid-wrapper {
    display: grid;
    grid-template-columns: var(--rail) minmax(0, var(--measure)) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: var(--gutter);
  }

  #grid-wrapper > article {
    grid-column: 2;
    grid-row: 1 / 3;
  }

  #grid-wrapper > nav#side-menu {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 36px;
  }

  #grid-wrapper > nav#toc {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--rule) transparent;
    padding-right: 8px;
  }

  #grid-wrapper:not(.has-side-menu) > nav#toc {
    grid-row: 1 / 3;
  }
}

/* ---------- Blocks and headings ---------- */

.block {
  border-radius: var(--radius);
}

.block.highlighted {
  background-color: var(--highlight);
  box-shadow: 0 0 0 6px var(--highlight);
}

/* Every summary that survives to the browser has a body behind it. */
details > summary {
  list-style-type: none;
  cursor: pointer;
}

details > summary::marker,
details > summary::-webkit-details-marker {
  display: none;
}

/* Two heading shapes, and most rules below have to name both: a section with
   a body is `section.block > details > summary > header`, one with nothing
   but a header (see Html_client's header_only) is `section.block.header-only
   > header`. Only the first is clickable. */
details > summary > header {
  display: inline;
}

.block.hide-metadata > details > summary > header > .metadata,
.block.hide-metadata.header-only > header > .metadata {
  display: none;
}

section.block > details {
  margin-bottom: 0.6em;
}

details h1,
section.header-only > header h1 {
  font-size: 18px;
  display: inline;
}

span.taxon {
  font-weight: 700;
}

/* The renderer emits the bare label ("Lemma"); the period is ours. */
span.taxon:not(:empty)::after {
  content: ".";
}

section[data-taxon="Proof"] span.taxon .section-number::before {
  content: "";
}

.mainmatter,
ul.block {
  counter-reset: section-num;
}

.numbered {
  counter-increment: section-num;
}

.section-number::before {
  content: " " counters(section-num, ".");
}

.slug,
.doi,
.orcid {
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
  margin-left: 0.3em;
}

a.slug:hover {
  color: var(--accent);
}

.metadata {
  font-size: 14px;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-top: 8px;
}

.metadata a {
  color: var(--muted);
}

.metadata a:hover {
  color: var(--accent);
}

/* Identifiers and URLs are not words: no small caps, no tracking. */
.metadata .doi,
.metadata .orcid,
.metadata .link.external {
  font-variant-caps: normal;
  letter-spacing: 0;
  font-size: 13px;
  margin-left: 0;
}

.metadata ul {
  padding-left: 0;
  margin: 0;
  display: inline;
}

.metadata ul li {
  display: inline;
  margin: 0;
}

.metadata li::after {
  content: " · ";
}

.metadata li:last-child::after {
  content: "";
}

/* The page's own heading. */

article > section.block > details > summary > header,
article > section.block.header-only > header {
  display: block;
  margin-bottom: 30px;
}

article > section.block > details > summary > header > h1,
article > section.block.header-only > header > h1 {
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -0.005em;
  display: block;
}

article > section.block > details > summary > header > h1 > .taxon,
article > section.block.header-only > header > h1 > .taxon {
  display: block;
  font-size: 14px;
  font-weight: 400;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: 14px;
}

/* Label, title and slug (with the dev controls after it) each on their own
   line; an untitled tree's empty .title takes no height. */
article > section.block > details > summary > header > h1 > .title,
article > section.block.header-only > header > h1 > .title {
  display: block;
}

article > section.block > details > summary > header > h1 > .slug,
article > section.block.header-only > header > h1 > .slug {
  margin-left: 0;
  line-height: 2.2;
  letter-spacing: 0.02em;
}

/* Linked titles (parent paths, redirect targets) stay ink; hover shows. */
h1 .title a {
  color: inherit;
}

h1 .title a:hover {
  color: var(--accent);
}

/* Foreign (implanted) trees are background reading: mark the eyebrow. */
article[data-foreign] > section.block > details > summary > header > h1 > .taxon::before,
article[data-foreign] > section.block.header-only > header > h1 > .taxon::before {
  content: "Foreign · ";
}

/* ---------- Environments (amsthm "plain" style) ---------- */

/* Results are set in italic; definitions, remarks, examples stay roman. */
section[data-taxon="Theorem"] > details > .mainmatter > p,
section[data-taxon="Theorem"] > details > .mainmatter > ol,
section[data-taxon="Theorem"] > details > .mainmatter > ul,
section[data-taxon="Lemma"] > details > .mainmatter > p,
section[data-taxon="Lemma"] > details > .mainmatter > ol,
section[data-taxon="Lemma"] > details > .mainmatter > ul,
section[data-taxon="Proposition"] > details > .mainmatter > p,
section[data-taxon="Proposition"] > details > .mainmatter > ol,
section[data-taxon="Proposition"] > details > .mainmatter > ul,
section[data-taxon="Corollary"] > details > .mainmatter > p,
section[data-taxon="Corollary"] > details > .mainmatter > ol,
section[data-taxon="Corollary"] > details > .mainmatter > ul,
section[data-taxon="Conjecture"] > details > .mainmatter > p,
section[data-taxon="Conjecture"] > details > .mainmatter > ol,
section[data-taxon="Conjecture"] > details > .mainmatter > ul,
section[data-taxon="Claim"] > details > .mainmatter > p,
section[data-taxon="Claim"] > details > .mainmatter > ol,
section[data-taxon="Claim"] > details > .mainmatter > ul {
  font-style: italic;
}

/* Emphasis inside an italic statement flips back to roman. */
section[data-taxon="Theorem"] > details > .mainmatter > p em,
section[data-taxon="Lemma"] > details > .mainmatter > p em,
section[data-taxon="Proposition"] > details > .mainmatter > p em,
section[data-taxon="Corollary"] > details > .mainmatter > p em,
section[data-taxon="Conjecture"] > details > .mainmatter > p em,
section[data-taxon="Claim"] > details > .mainmatter > p em {
  font-style: normal;
}

/* Nested environments: bold run-in label, roman title, slug after. */
section section[data-taxon] > details > summary > header > h1,
section section[data-taxon].header-only > header > h1 {
  font-size: 18px;
  display: inline;
}

section section[data-taxon] > details > .mainmatter {
  margin-top: 0.3em;
}

section section.block[data-taxon] {
  margin-top: 1em;
}

/* Proofs: run-in italic "Proof." and a tombstone. */
section[data-taxon="Proof"] > details > summary {
  display: inline;
}

section[data-taxon="Proof"] > details > summary > header > h1 {
  display: inline;
  font-size: inherit;
  font-style: italic;
}

section[data-taxon="Proof"] > details > summary > header > h1 > .taxon {
  font-weight: 400;
  font-style: italic;
}

section[data-taxon="Proof"] > details > .mainmatter {
  display: inline;
  margin-top: 0;
  font-style: normal;
}

section[data-taxon="Proof"] > details > .mainmatter > p:first-child {
  display: inline;
}

section[data-taxon="Proof"] > details > .mainmatter > p:last-child::after {
  content: "□";
  float: right;
  font-style: normal;
  margin-left: 1em;
}

/* ---------- Collapsed subtrees ---------- */

/* A reader can collapse any subtree, which leaves a bare heading line —
   indistinguishable from the heading of a subtree that has nothing in it
   (those are not a <details> at all; see header_only above). So a collapsed
   subtree ends in an ellipsis: elision is what it means, and it lives in the
   text flow, where a marginal marker would be clipped by the ancestor
   section's overflow (which is there to keep wide equations out of the
   margins). No mark means nothing is hidden.

   Two selectors, because the page's own heading is handled below and the
   backmatter's first two levels — the section and its entries — already say
   it with a `▸`; from the third level down (inside an expanded entry) no
   triangle reaches, so the ellipsis speaks there too. */
#grid-wrapper > article > section.block section.block > details:not([open])
  > summary > header > h1::after,
#grid-wrapper > article > footer section.block section.block section.block
  > details:not([open]) > summary > header > h1::after {
  content: " …";
  color: var(--muted);
  font-style: normal;
}

#grid-wrapper > article > section.block section.block > details:not([open])
  > summary:hover > header > h1::after,
#grid-wrapper > article > footer section.block section.block section.block
  > details:not([open]) > summary:hover > header > h1::after {
  color: var(--ink);
}

/* The page's own heading collapses too; there the ellipsis goes after the
   title, since the slug sits on the line below it. */
#grid-wrapper > article > section.block > details:not([open]) > summary
  > header > h1 > .title::after {
  content: " …";
  color: var(--muted);
}

#grid-wrapper > article > section.block > details:not([open])
  > summary:hover > header > h1 > .title::after {
  color: var(--ink);
}

/* ---------- Backmatter ---------- */

footer {
  margin-top: 56px;
  border-top: 1px solid var(--rule);
  padding-top: 22px;
}

footer > section.block {
  margin-bottom: 30px;
}

footer > section.block > details > summary > header > h1 {
  display: block;
  font-size: 13px;
  font-weight: 400;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: 14px;
}

footer > section.block > details > summary > header > h1 > .taxon::after {
  content: "";
}

/* Collapsible: a small disclosure triangle before the heading, turning when
   open; the summary is the only click target (see render_backmatter). */
footer > section.block > details > summary {
  cursor: pointer;
  user-select: none;
}

/* The triangles hang in the gutter so labels, rules and entries stay flush.
   Sections are overflow-y:hidden above (which also clips horizontally), so
   footer sections must be allowed to overflow for the gutter to be visible. */
footer section.block {
  overflow: visible;
}

footer > section.block > details > summary > header > h1::before {
  content: "▸";
  display: inline-block;
  width: 1.4em;
  margin-left: -1.4em;
  font-size: 13px;
  font-variant-caps: normal;
  letter-spacing: 0;
  vertical-align: 0.05em;
  color: var(--muted);
  transition: transform 0.12s ease-out;
  transform-origin: 35% 50%;
}

footer > section.block > details[open] > summary > header > h1::before {
  transform: rotate(90deg);
}

footer > section.block > details > summary:hover > header > h1 {
  color: var(--ink);
}

/* Entries: the triangle marks the ones that open. An entry whose tree is
   only a header gets a dot in the same gutter instead — the two states read
   apart at a glance, and neither the pointer nor the keyboard offers a
   toggle that would do nothing (that part is the renderer's doing: such a
   section is not a <details>). */
footer section.block section.block > details > summary {
  cursor: pointer;
}

footer section.block section.block.header-only > header::before {
  content: "·";
  display: inline-block;
  width: 18px;
  margin-left: -18px;
  font-size: 17px;
  vertical-align: 0.02em;
  color: var(--leaf-mark);
}

footer section.block section.block section.block.header-only > header::before {
  content: "";
  margin-left: 0;
  width: 0;
}

footer section.block section.block > details > summary::before {
  content: "▸";
  display: inline-block;
  width: 18px;
  margin-left: -18px;
  font-size: 13px;
  vertical-align: 0.1em;
  color: var(--muted);
  transition: transform 0.12s ease-out;
  transform-origin: 35% 50%;
}

footer section.block section.block > details[open] > summary::before {
  transform: rotate(90deg);
}

footer section.block section.block > details > summary:hover::before {
  color: var(--ink);
}

footer section.block section.block section.block > details > summary::before {
  content: "";
  margin-left: 0;
  width: 0;
}

footer .link-list {
  padding-left: 0;
}

footer h2 {
  font-size: 14px;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.14em;
  color: var(--muted);
}

footer section.block section.block {
  padding: 12px 0 8px;
  border-top: 1px dotted var(--rule);
  margin-top: 0;
}

footer section.block section.block section.block {
  border-top: none;
  padding: 6px 0 0 0;
}

footer section.block section.block > details {
  margin-bottom: 0;
}

footer section.block section.block > details > summary > header > h1,
footer section.block section.block.header-only > header > h1 {
  font-size: 18px;
  display: inline;
}

footer .metadata {
  font-size: 13px;
  margin-top: 2px;
  display: block;
}

footer .mainmatter {
  font-size: 16.5px;
  margin-top: 10px;
  color: #2b2823;
}

.link-list > section > details > summary > header h1,
.link-list > section.header-only > header h1 {
  font-size: 18px;
}

/* ---------- Heading controls ([edit] [plots] [agent]) ---------- */

.edit-button,
.plots-index-button,
.agent-button {
  font-size: 13px;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
  font-weight: 400;
  color: var(--muted);
  opacity: 0.6;
  margin-left: 0.6em;
}

.edit-button:hover,
.plots-index-button:hover,
.agent-button:hover {
  opacity: 1;
  color: var(--accent);
  text-decoration: none;
}

.plots-index-button {
  display: none;
}

body.agent-enabled .plots-index-button {
  display: inline;
}

/* Both controls are rendered server-side but start hidden: lib/app/Plots.ml
   marks <body> once it knows what the server behind this page can do —
   .agent-enabled when forest-serve answers the ping probe at all, and
   .agent-launchable only when an agent command is actually configured. */
.agent-button {
  display: none;
}

body.agent-launchable .agent-button {
  display: inline;
}

/* ---------- Macros, tooltips ---------- */

table.macros {
  overflow-x: visible;
  overflow-y: visible;
  font-size: 0.9em;
}

table.macros td {
  padding-left: 5pt;
  padding-right: 15pt;
  vertical-align: baseline;
}

td.macro-name,
td.macro-body {
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 0.85em;
}

td.macro-doc,
.macro-doc {
  font-size: 0.9em;
  font-style: italic;
}

.macro-name {
  white-space: nowrap;
}

.macro-is-private {
  color: var(--muted);
}

.enclosing.macro-scope > .enclosing {
  border-radius: 2px;
}

.enclosing.macro-scope > .enclosing:hover {
  background-color: var(--tint);
}

[aria-label][role~="tooltip"]::after {
  font-family: var(--serif);
}

ninja-keys::part(ninja-action) {
  white-space: nowrap;
}

/* ---------- Footnotes / Sidenotes ---------- */

.footnote {
  position: relative;
}

.footnote-ref {
  font-size: 0.78em;
  vertical-align: super;
  line-height: 0;
  text-decoration: none;
  margin-left: 0.04em;
  cursor: pointer;
  color: var(--accent);
}

.footnote-ref:hover {
  color: var(--accent-hover);
}

.sidenote {
  display: none;
}

.sidenote-marker {
  font-size: 0.78em;
  vertical-align: super;
  line-height: 0;
  text-decoration: none;
  color: var(--accent);
  margin-right: 0.3em;
}

/* The renderer demotes the note's block elements to spans (see
   Html_client.render_footnote); give them back their block layout here. */
.sidenote .sidenote-body .inline-p,
.sidenote .sidenote-body .inline-div,
.sidenote .sidenote-body .inline-blockquote,
.sidenote .sidenote-body .inline-figure,
.sidenote .sidenote-body .inline-pre {
  display: block;
  margin: 0 0 0.4em 0;
}

.sidenote .sidenote-body .inline-ul,
.sidenote .sidenote-body .inline-ol {
  display: block;
  margin: 0 0 0.4em 0;
  padding-left: 1.2em;
}

.sidenote .sidenote-body .inline-ol {
  counter-reset: inline-li;
}

.sidenote .sidenote-body .inline-li {
  display: list-item;
  list-style: disc;
}

.sidenote .sidenote-body .inline-ol > .inline-li {
  list-style: decimal;
}

/* The first paragraph runs in after the marker. */
.sidenote .sidenote-body > .inline-p:first-child {
  display: inline;
}

.sidenote .sidenote-body > :last-child {
  margin-bottom: 0;
}

/* On wide screens, lib/app/Sidenotes.ml stacks the notes in the right margin
   (it shows them and sets their top; the horizontal placement is ours). */
@media only screen and (min-width: 1300px) {
  article {
    position: relative;
  }

  /* article is now the containing block; .footnote must not be */
  .footnote {
    position: static;
  }

  .footnote .sidenote {
    display: none; /* Sidenotes.ml shows (as block) and positions them */
    position: absolute;
    left: calc(100% + 40px);
    width: 220px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--muted);
    font-style: normal;
    background: transparent;
  }

  /* Fallback: too many sidenotes to fit without overflowing the article.
     JS adds this class; reverts to the hover-popup behaviour. */
  article.sidenotes-overflow .footnote {
    position: relative;
  }

  article.sidenotes-overflow .sidenote {
    display: none;
  }

  article.sidenotes-overflow .footnote-ref:hover + .sidenote,
  article.sidenotes-overflow .footnote-ref:focus + .sidenote,
  article.sidenotes-overflow .sidenote.pinned {
    display: block;
    position: absolute;
    z-index: 50;
    top: 1.4em;
    left: 0;
    width: min(32em, 90vw);
    font-size: 15px;
    line-height: 1.4;
    font-style: normal;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 0.5em 0.7em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    color: var(--ink);
  }
}

/* On narrow screens, show as a popup on hover/focus or when pinned. */
@media only screen and (max-width: 1299px) {
  .footnote-ref:hover + .sidenote,
  .footnote-ref:focus + .sidenote,
  .footnote .sidenote.pinned {
    display: block;
    position: absolute;
    z-index: 50;
    top: 1.4em;
    left: 0;
    width: min(32em, 90vw);
    font-size: 15px;
    line-height: 1.4;
    font-style: normal;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 0.5em 0.7em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    color: var(--ink);
  }
}

/* ---------- Plots UI, dialogs, notices (functional chrome, kept) ---------- */

.plots-dialog {
  width: min(32rem, calc(100vw - 2rem));
  border: 1px solid var(--secondary);
  border-radius: 6px;
  padding: 1.25rem;
  background: var(--background, white);
  color: inherit;
}

.plots-dialog::backdrop {
  background: rgba(0, 0, 0, .35);
}

.plots-dialog form,
.plots-dialog label {
  display: grid;
  gap: .5rem;
}

.plots-dialog form {
  gap: 1rem;
}

.plots-dialog [hidden] {
  display: none;
}

.plots-dialog h2,
.plots-dialog p {
  margin: 0;
}

.plots-dialog select,
.plots-dialog input {
  box-sizing: border-box;
  width: 100%;
  padding: .5rem;
  font: inherit;
}

.plots-dialog-hint {
  min-height: 2.5em;
  color: var(--secondary);
}

.plots-dialog-error {
  min-height: 1.25em;
  color: #a40000;
}

.plots-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: .75rem;
}

.plots-dialog textarea {
  box-sizing: border-box;
  width: 100%;
  padding: .5rem;
  font: inherit;
}

.plots-dialog label.plots-dialog-check {
  grid-template-columns: auto 1fr;
  align-items: center;
}

.plots-dialog label.plots-dialog-check input {
  width: auto;
}

.plots-dialog .plots-disabled {
  opacity: .5;
}

.agent-notice {
  position: fixed;
  z-index: 10000;
  right: 1rem;
  bottom: 1rem;
  display: grid;
  gap: .6rem;
  max-width: min(38rem, calc(100vw - 2rem));
  padding: 1rem 2.5rem 1rem 1rem;
  border: 1px solid var(--secondary);
  border-radius: 6px;
  background: var(--background, white);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .2);
}

.agent-notice-error {
  border-color: #a40000;
}

.agent-notice code {
  overflow-wrap: anywhere;
  user-select: all;
}

.agent-notice button {
  justify-self: start;
}

.agent-notice-close {
  position: absolute;
  top: .25rem;
  right: .5rem;
  border: 0;
  background: transparent;
  font-size: 1.4rem;
}

/* ---------- Plots: worktree-backed agent sessions ---------- */

/* The "differs in plot" badge injected under a tree's heading. */
.plot-badge {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
  align-items: baseline;
  font-size: 0.85em;
  border: 1px solid #d8c46a;
  background: rgba(240, 220, 130, 0.18);
  border-radius: 5px;
  padding: 0.4em 0.7em;
  margin: 0.5em 0;
}

.plot-badge-entry {
  white-space: nowrap;
}

.plot-badge button {
  font: inherit;
  font-size: 0.9em;
  cursor: pointer;
}

/* The /plots dashboard and /compare page. */
.plots-application {
  margin: 0;
  min-height: 100vh;
  background: #f4f5f2;
  color: #1f2926;
}

.plots-application main {
  max-width: 62rem;
  margin: 0 auto;
  padding: 1.2rem 1rem 4rem;
}

.plots-header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1rem;
}

.plots-header h1 {
  margin: 0;
}

.plots-header p {
  margin: 0.15rem 0 0;
  color: #5c6b66;
}

.plots-header > div {
  flex: 1;
}

.plots-home {
  white-space: nowrap;
}

.plots-banner {
  border-radius: 6px;
  padding: 0.6rem 0.9rem;
  margin: 0.6rem 0;
  border: 1px solid #c9d2ce;
  background: #fff;
}

.plots-banner.bad {
  border-color: #c96a5f;
  background: #fbeeec;
}

.plots-banner.warn {
  border-color: #d8c46a;
  background: #faf4dd;
}

.plots-node {
  margin-left: calc(var(--depth, 0) * 1.6rem);
}

.plots-card {
  border: 1px solid #c9d2ce;
  border-radius: 8px;
  background: #fff;
  padding: 0.8rem 1rem;
  margin: 0.7rem 0;
}

.plots-card.bad {
  border-color: #c96a5f;
}

.plots-card.plots-main {
  background: transparent;
  border-style: dashed;
}

.plots-card-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
}

.plots-card-heading h2 {
  margin: 0;
  font-size: 1.05rem;
}

.plots-purpose {
  color: #3c4a45;
  flex: 1;
  min-width: 12rem;
}

.plots-flag {
  font-size: 0.75rem;
  border: 1px solid #9aa8a2;
  border-radius: 999px;
  padding: 0.05rem 0.55rem;
  color: #45534e;
  white-space: nowrap;
}

.plots-flag.ok {
  border-color: #5d9b7c;
  color: #2c6b4c;
}

.plots-flag.warn {
  border-color: #cf9f3f;
  color: #8a6414;
}

.plots-flag.bad {
  border-color: #c96a5f;
  color: #93392e;
}

.plots-muted {
  color: #5c6b66;
  font-size: 0.85rem;
  margin: 0.3rem 0;
}

.plots-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.5rem 0;
}

.plots-application button {
  font: inherit;
  font-size: 0.85rem;
  border: 1px solid #40564f;
  border-radius: 5px;
  background: #40564f;
  color: #fff;
  padding: 0.25rem 0.7rem;
  cursor: pointer;
}

.plots-application button.plots-secondary {
  background: transparent;
  color: #2c3a35;
  border-color: #9aa8a2;
}

.plots-application button.plots-danger {
  background: transparent;
  color: #93392e;
  border-color: #c96a5f;
}

.plots-session {
  border-top: 1px dashed #c9d2ce;
  margin-top: 0.55rem;
  padding-top: 0.45rem;
}

.plots-session summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  cursor: pointer;
}

.plots-session-state {
  color: #5c6b66;
  font-size: 0.8rem;
  flex: 1;
}

.plots-session.stale .plots-session-state {
  color: #93392e;
  font-weight: 600;
}

/* What the session's hooks report: working / waiting for the user. */
.plots-session.state-working .plots-session-state {
  color: #2d6a4f;
}

.plots-session.state-waiting .plots-session-state {
  color: #8a5a00;
  font-weight: 600;
}

.plots-session-provenance {
  margin: 0.25rem 0 0;
  font-size: 0.78rem;
}

.plots-session-prompt {
  margin: 0.25rem 0;
  font-size: 0.8rem;
}

.plots-session-prompt pre {
  white-space: pre-wrap;
  font-size: 0.75rem;
  margin: 0.25rem 0;
}

.plots-subagents {
  list-style: none;
  margin: 0.4rem 0 0.2rem;
  padding: 0 0 0 0.75rem;
  border-left: 2px solid #c9d2ce;
  font-size: 0.8rem;
}

.plots-subagents li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.1rem 0;
}

.plots-subagents li.running code {
  color: #2d6a4f;
  font-weight: 600;
}

.plots-subagents li.done {
  opacity: 0.7;
}

.plots-subagent-task {
  flex: 1;
}

.plots-capture {
  background: #10201b;
  color: #d7e6df;
  font-size: 0.72rem;
  line-height: 1.35;
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
  margin: 0.5rem 0 0.2rem;
  max-height: 22rem;
  overflow: auto;
  white-space: pre-wrap;
}

.plots-report pre {
  white-space: pre-wrap;
  background: #f2f4ef;
  border-radius: 6px;
  padding: 0.5rem 0.7rem;
  font-size: 0.8rem;
}

.plots-empty {
  text-align: center;
  color: #5c6b66;
  padding: 2.5rem 0;
}

.plots-toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  gap: 0.7rem;
  align-items: center;
  background: #26332e;
  color: #fff;
  border-radius: 6px;
  padding: 0.55rem 0.9rem;
  z-index: 30;
}

.plots-toast-error {
  background: #7c2d22;
}

.plots-toast button {
  background: transparent;
  border: none;
  color: inherit;
  font-size: 1rem;
}

.plots-dialog label {
  display: grid;
  gap: 0.35rem;
  margin: 0.6rem 0;
}

.plots-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.8rem;
}

/* /compare: two full-height panes of the rendered tree. */
.plots-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
  height: calc(100vh - 7rem);
}

.plots-pane {
  display: flex;
  flex-direction: column;
  border: 1px solid #c9d2ce;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.plots-pane h2 {
  margin: 0;
  padding: 0.4rem 0.8rem;
  font-size: 0.9rem;
  border-bottom: 1px solid #e2e7e4;
}

.plots-pane iframe {
  border: none;
  flex: 1;
  width: 100%;
}

@media (max-width: 60rem) {
  .plots-compare {
    grid-template-columns: 1fr;
    height: auto;
  }

  .plots-pane iframe {
    min-height: 60vh;
  }