/* OpenTTM manual — the part of the design that only the docs need.
   The site's own assets/style.css is loaded first and supplies the colour
   tokens, the typography, the header and the footer. Everything here either
   styles markup that only Sphinx produces (admonitions, toctrees, literal
   blocks) or corrects a site rule that is right for a landing page and wrong
   for a manual.

   No colour is defined here that is not already a token in style.css, so
   dark mode is inherited rather than reimplemented. */

/* ------------------------------------------------------------ corrections */

/* Sphinx wraps EVERY heading level in <section>. The site stylesheet gives a
   section 2.5rem of padding and a rule between siblings, which would put a
   horizontal line and a gap between a heading and its own subheadings. */
.docbody section {
  padding-top: 0;
  padding-bottom: 0;
  border-top: 0;
}

/* ---------------------------------------------------------------- page top */

.docbody { padding-top: 3rem; padding-bottom: 1rem; }

.crumbs { margin: 0 0 1rem; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }

.docbody h1 {
  font-size: clamp(1.9rem, 4.2vw, 2.6rem);
  line-height: 1.15; letter-spacing: -.022em;
  margin: 0 0 1rem; font-weight: 700;
}

/* The paragraph immediately after the title reads as the page's lede — the
   same treatment the hand-written pages give it. A page that opens with an
   admonition instead simply does not get one. */
.docbody h1 + p {
  font-size: 1.15rem; color: var(--muted);
  max-width: var(--measure); margin: 0 0 2rem;
}

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

.docbody h2 {
  margin: 3rem 0 1rem; padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.docbody section:first-of-type > h2 { margin-top: 2.5rem; }
.docbody h3 { margin: 2rem 0 .5rem; }
.docbody h4 {
  font-size: 1rem; font-weight: 650; margin: 1.6rem 0 .4rem;
  color: var(--muted);
}

/* Permalinks: present for anyone who wants to link to a section, invisible
   until the heading is hovered so they do not clutter the page. */
.docbody .headerlink {
  margin-left: .4rem; text-decoration: none; color: var(--muted);
  opacity: 0; font-weight: 400;
}
.docbody h1:hover .headerlink, .docbody h2:hover .headerlink,
.docbody h3:hover .headerlink, .docbody h4:hover .headerlink,
.docbody .headerlink:focus { opacity: 1; }

/* ------------------------------------------------------------------- prose */

.docbody ul, .docbody ol { max-width: var(--measure); padding-left: 1.3rem; }
.docbody li { margin: .35rem 0; }
.docbody li > p { margin: .35rem 0; }
.docbody li > ul, .docbody li > ol { margin: .35rem 0; }

.docbody blockquote {
  margin: 1.5rem 0; padding-left: 1.15rem;
  border-left: 3px solid var(--line); color: var(--muted);
}

.docbody hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

.docbody strong { font-weight: 650; }

/* ------------------------------------------------------------- admonitions */

.docbody .admonition {
  background: var(--surface);
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 1rem 1.15rem; margin: 1.5rem 0;
  max-width: var(--measure);
}
.docbody .admonition > :first-child { margin-top: 0; }
.docbody .admonition > :last-child  { margin-bottom: 0; }
.docbody .admonition p { max-width: none; }
.docbody .admonition-title {
  font-weight: 650; margin: 0 0 .4rem;
}

/* A warning takes the site's own notice colours, so a caution in the manual
   and a caution on the download page look like the same thing. */
.docbody .admonition.warning, .docbody .admonition.caution,
.docbody .admonition.danger, .docbody .admonition.attention {
  background: var(--warn-bg);
  border-color: var(--warn-line); border-left-color: var(--warn-line);
  color: var(--warn-ink);
}
.docbody .admonition.warning a, .docbody .admonition.caution a,
.docbody .admonition.danger a, .docbody .admonition.attention a {
  color: inherit;
}

/* ------------------------------------------------------------ code, tables */

/* No Pygments stylesheet is loaded, so a literal block is monochrome by
   design — the rest of the site has no syntax colouring either. */
.docbody div.highlight { margin: 1.4rem 0; }
/* Wider than the prose measure, because a command line is not prose — but
   bounded, or a two-word block draws a box across the whole page. 48rem
   holds the longest line in the manual; anything longer scrolls. */
.docbody pre {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: .9rem 1.05rem; margin: 1.4rem 0; max-width: 48rem;
  overflow-x: auto; font-size: .88rem; line-height: 1.55;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
.docbody pre span { color: inherit; }
.docbody div.highlight pre { margin: 0; }

/* display:block lets a wide table scroll inside itself rather than pushing
   the whole page wider than the viewport. */
.docbody table.docutils {
  display: block; width: max-content; max-width: 100%;
  overflow-x: auto; border-collapse: collapse;
  margin: 1.5rem 0; font-size: .95rem;
}
.docbody table.docutils th, .docbody table.docutils td {
  text-align: left; vertical-align: top;
  padding: .55rem 1.4rem .55rem 0; border-bottom: 1px solid var(--line);
}
.docbody table.docutils thead th { font-weight: 650; }
.docbody table.docutils tbody td { color: var(--muted); }
.docbody table.docutils tbody td:first-child { color: var(--ink); }
.docbody table.docutils p { margin: 0; max-width: none; }

/* --------------------------------------------------------- index listings */

/* A definition list marked {.cards} is a list of pages: the term is the link,
   the definition says what the page is for. Term and definition share one
   border so the pair reads as a single card. */
.docbody dl.cards { margin: 1.75rem 0; max-width: var(--measure); }
.docbody dl.cards dt {
  margin: 1rem 0 0; padding: 1rem 1.15rem .1rem;
  background: var(--surface);
  border: 1px solid var(--line); border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  font-weight: 650;
}
.docbody dl.cards dd {
  margin: 0; padding: 0 1.15rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line); border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  color: var(--muted);
}
.docbody dl.cards dd p { margin: 0; max-width: none; font-size: .94rem; }
.docbody dl.cards dt a { text-decoration: none; }
.docbody dl.cards dt:hover, .docbody dl.cards dt:hover + dd { border-color: var(--accent); }

/* ---------------------------------------------------------------- toctrees */

.docbody .toctree-wrapper { margin: 1.5rem 0; }
.docbody .toctree-wrapper p.caption {
  font-size: 1.45rem; font-weight: 650; letter-spacing: -.015em;
  margin: 2.5rem 0 1rem; padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.docbody .toctree-wrapper ul { list-style: none; padding-left: 0; }
.docbody .toctree-wrapper li { margin: .5rem 0; }
.docbody .toctree-wrapper li ul { padding-left: 1.15rem; }
.docbody .toctree-wrapper a { text-decoration: none; }
.docbody .toctree-wrapper a:hover { text-decoration: underline; }

/* ------------------------------------------------------------- page footer */

.pagenav {
  display: flex; gap: 1rem; flex-wrap: wrap;
  margin-top: 3.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.pn {
  flex: 1 1 14rem; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: .85rem 1.1rem; background: var(--surface);
  text-decoration: none; color: var(--ink); font-weight: 600;
}
.pn:hover { border-color: var(--accent); color: var(--ink); }
.pn span {
  display: block; font-size: .82rem; font-weight: 400;
  color: var(--muted); margin-bottom: .15rem;
}
.pn.next { text-align: right; }

@media (max-width: 34rem) {
  .docbody { padding-top: 2rem; }
  .pagenav { flex-direction: column; }
  .pn.next { text-align: left; }
}