/* adoctra reference stylesheet.
 *
 * A modern, self-contained theme for adoctra's HTML output. The HTML backend
 * inlines it into the document `head`, so a converted document looks intentional
 * with no external assets. It grows as more constructs gain rendering; today it
 * covers the document base and the block and inline constructs.
 *
 * Deliberately modern markup and CSS (custom properties, color-mix(), logical
 * properties, flex/grid instead of layout tables), while the rendered result
 * looks like Asciidoctor's default stylesheet: e.g. adoctra emits a semantic
 * `aside` per admonition and lays it out like Ruby's label/content table.
 */

/* Fonts, colours and sizes are those of Asciidoctor's default stylesheet
   (checked with the visual-v1 profile, docs/visual.adoc). */
:root {
  --adoctra-font: "Noto Serif", "DejaVu Serif", serif;
  --adoctra-heading-font: "Open Sans", "DejaVu Sans", sans-serif;
  --adoctra-mono: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
  --adoctra-fg: rgb(0 0 0 / 0.8);
  --adoctra-heading-fg: #ba3925;
  --adoctra-title-fg: #7a2518;
  --adoctra-code-fg: rgb(0 0 0 / 0.9);
  --adoctra-link: #2156a5;
  --adoctra-link-hover: #1d4b8f;
  --adoctra-bg: #ffffff;
  --adoctra-code-bg: #f7f7f8;
  --adoctra-rule: #dddddf;
  --adoctra-section-rule: #e7e7e9;
  --adoctra-sidebar-bg: #f8f8f7;
  color-scheme: light;
}

*, ::before, ::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--adoctra-font);
  font-size: 100%;
  /* As in Ruby, text elements set their own line height; bare text (a
     styled paragraph's simple content) keeps 1. */
  line-height: 1;
  color: var(--adoctra-fg);
  background: var(--adoctra-bg);
  margin: 0;
  tab-size: 4;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ruby's rhythm: blocks carry only a bottom margin. */
p {
  margin: 0 0 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  letter-spacing: -0.01em;
  text-rendering: optimizeLegibility;
}
dt, summary, span.alt { font-size: 1.0625rem; text-rendering: optimizeLegibility; }
summary, span.alt { letter-spacing: -0.01em; }
p strong, .admonition-content strong { letter-spacing: -0.005em; }
.sidebarblock :is(p, dt), p.tableblock { font-size: 1em; }
/* Ruby's `.sidebarblock td.content` (its own rule keeps the `:is()` above at
   element specificity). */
.sidebarblock .admonition-content { font-size: 1em; }
/* A list item's text is Ruby's item `p`, so in a sidebar it is 1em too. */
.sidebarblock :is(ul, ol):not([class^="sectlevel"]) > li { font-size: 1em; }
p.lead,
#preamble > p:not([class]):first-child {
  font-size: 1.21875em;
  color: rgb(0 0 0 / 0.85);
}
a { color: var(--adoctra-link); text-decoration: underline; }
a:hover, a:focus { color: var(--adoctra-link-hover); }
hr {
  block-size: 0;
  border: solid var(--adoctra-rule);
  border-width: 1px 0 0;
  clear: both;
  margin: 1.25em 0 1.1875em;
}
b, strong { font-weight: bold; }
em, i { font-style: italic; }
em em { font-style: normal; }
strong strong { font-weight: 400; }

/* --- Document header and footer -------------------------------------------

   Like Ruby's stylesheet, the header, content and footnotes share one
   centred column (`max-width` overrides it), the header shows the title
   above a line of author/revision details, and the footer is a full-width
   dark band. */
:is(#header, #content, #footnotes, #footer) {
  position: relative;
  width: 100%;
  max-width: 62.5em;
  margin: 0 auto;
  padding-inline: 0.9375em;
}
:is(#header, #footnotes, #footer)::before { content: " "; display: table; }
:is(#header, #content, #footnotes, #footer)::after { content: " "; display: table; clear: both; }
#content { margin-block: 1.25em 0.625em; }
@media screen and (min-width: 768px) {
  #content { margin-block-end: 1.25em; }
}
#header > h1:first-child {
  color: rgb(0 0 0 / 0.85);
  margin-block: 2.25rem 0;
}
#header > h1:only-child,
body.toc2 #header > h1:nth-last-child(2) {
  border-block-end: 1px solid var(--adoctra-rule);
  padding-block-end: 8px;
}
#header .details {
  display: flex;
  flex-flow: row wrap;
  padding: 0.25em 0 0.25em 0.25em;
  border-block-end: 1px solid var(--adoctra-rule);
  line-height: 1.45;
  color: rgb(0 0 0 / 0.6);
}
#header .details span:first-child { margin-inline-start: -0.125em; }
#header .details span.email a { color: rgb(0 0 0 / 0.85); }
#header .details br { display: none; }
#header .details br + span::before { content: "\00a0\2013\00a0"; }
#header .details br + span.author::before {
  content: "\00a0\22c5\00a0";
  color: rgb(0 0 0 / 0.85);
}
#header .details br + span#revremark::before { content: "\00a0|\00a0"; }
#header #revnumber { text-transform: capitalize; }
#header #revnumber::after { content: "\00a0"; }
#header > h1:first-child + #toc { margin-block-start: 8px; }
/* Full width unless `max-width` (an inline style) narrows it: then it is
   centred like the column, as in Ruby. */
#footer {
  max-width: none;
  padding: 1.25em;
  background: rgb(0 0 0 / 0.8);
}
#footer-text { color: rgb(255 255 255 / 0.8); line-height: 1.44; }

/* `toc: left`/`right`: a fixed sidebar on wide screens, like Ruby's toc2. */
@media screen and (min-width: 768px) {
  body.toc2 { padding-inline-start: 15em; }
  body.toc2.toc-right { padding-inline: 0 15em; }
  nav#toc.toc2 {
    box-sizing: border-box;
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 1000;
    width: 15em;
    margin: 0;
    padding: 1.25em 1em;
    overflow: auto;
    border: 0;
    border-inline-end: 1px solid var(--adoctra-section-rule);
    background: var(--adoctra-sidebar-bg);
  }
  nav#toc.toc2 #toctitle { margin-block: 0 0.8rem; font-size: 1.2em; }
  nav#toc.toc2 > ul { font-size: 0.9em; margin-block-end: 0; }
  nav#toc.toc2 ul ul { margin-inline-start: 0; padding-inline-start: 1em; }
  nav#toc.toc2 ul.sectlevel0 ul.sectlevel1 { padding-inline-start: 0; margin-block: 0.5em; }
  body.toc2.toc-right nav#toc.toc2 {
    inset-inline: auto 0;
    border-inline-end: 0;
    border-inline-start: 1px solid var(--adoctra-section-rule);
  }
}
@media screen and (min-width: 1280px) {
  body.toc2 { padding-inline-start: 20em; }
  body.toc2.toc-right { padding-inline: 0 20em; }
  nav#toc.toc2 { width: 20em; }
  nav#toc.toc2 #toctitle { font-size: 1.375em; }
  nav#toc.toc2 > ul { font-size: 0.95em; }
  nav#toc.toc2 ul ul { padding-inline-start: 1.25em; }
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--adoctra-heading-font);
  font-weight: 300;
  font-style: normal;
  line-height: 1.2;
  word-spacing: -0.05em;
  margin-block: 1em 0.5em;
  text-rendering: optimizeLegibility;
}
h1, h2 { letter-spacing: -0.01em; }
h1 { font-size: 2.125em; }
h2 { font-size: 1.6875em; }
h3 { font-size: 1.375em; }
h4, h5 { font-size: 1.125em; }
h6 { font-size: 1em; }
@media screen and (min-width: 768px) {
  h1 { font-size: 2.75em; }
  h2 { font-size: 2.3125em; }
  h3 { font-size: 1.6875em; }
  h4 { font-size: 1.4375em; }
}
:is(h1, h2, h3, h4, h5, h6) strong { font-weight: 400; }

/* Sections: Ruby's spacing and the rule between top-level sections. */
section.sect1 { padding-block-end: 0.625em; }
@media screen and (min-width: 768px) {
  section.sect1 { padding-block-end: 1.25em; }
}
section.sect1:last-child { padding-block-end: 0; }
section.sect1 + section.sect1 { border-block-start: 1px solid var(--adoctra-section-rule); }

/* Like Ruby's stylesheet, a `sectanchors` anchor hangs before the title
   (a section sign shown on hover) and a `sectlinks` link keeps the title's
   look. */
:is(h1, h2, h3, h4, h5, h6) > a.anchor {
  position: absolute;
  z-index: 1001;
  width: 1.5ex;
  margin-inline-start: -1.5ex;
  display: block;
  text-decoration: none !important;
  visibility: hidden;
  text-align: center;
  font-weight: 400;
}
:is(h1, h2, h3, h4, h5, h6) > a.anchor::before {
  content: "\00a7";
  font-size: 0.85em;
  display: block;
  padding-top: 0.1em;
}
:is(h1, h2, h3, h4, h5, h6):hover > a.anchor,
:is(h1, h2, h3, h4, h5, h6) > a.anchor:hover { visibility: visible; }
:is(h1, h2, h3, h4, h5, h6) > a.link { color: inherit; text-decoration: none; }
:is(h1, h2, h3, h4, h5, h6) > a.link:hover { color: color-mix(in srgb, currentColor 80%, transparent); }

code { font-family: var(--adoctra-mono); font-weight: 400; }
:not(pre):not([class^="L"]) > code {
  font-size: 0.9375em;
  font-style: normal !important;
  letter-spacing: 0;
  word-spacing: -0.15em;
  padding: 0.1em 0.5ex;
  border-radius: 4px;
  background: var(--adoctra-code-bg);
  line-height: 1.45;
  text-rendering: optimizeSpeed;
}

/* Like Ruby's stylesheet, verbatim text wraps unless `nowrap` (`%nowrap` or
   `:prewrap!:`) keeps its lines. Listing and literal blocks get Ruby's box
   and its viewport-dependent size; a highlighter theme paints its own
   background. The break rule is inherited, as Ruby's: `anywhere` from the
   body, `normal` inside a table (a literal cell widens it). */
pre {
  margin: 0;
  font-family: var(--adoctra-mono);
  white-space: pre-wrap;
  line-height: 1.45;
  text-rendering: optimizeSpeed;
}
pre :is(code, pre) { color: inherit; font-size: inherit; line-height: inherit; }
pre > code { display: block; }
/* Ruby's margin is on the 16px wrapper, not the smaller `pre`. */
pre:is(.listing, .literalblock, .highlight) {
  margin-block-end: 1.25rem;
  overflow-x: auto;
  padding: 1em;
  border-radius: 4px;
  font-size: 0.8125rem;
}
@media screen and (min-width: 768px) {
  pre:is(.listing, .literalblock, .highlight) { font-size: 0.90625rem; }
}
@media screen and (min-width: 1280px) {
  pre:is(.listing, .literalblock, .highlight) { font-size: 1rem; }
}
pre.nowrap { white-space: pre; overflow-wrap: normal; }
/* In an admonition Ruby's verbatim wrapper inherits the content cell's
   17px (at any depth: an open block or list in it keeps that size), so the
   sizes and margin are relative to it again. */
.admonition-content pre:is(.listing, .literalblock, .highlight) {
  margin-block-end: 1.328125rem; /* 1.25em of the 17px wrapper */
  font-size: 0.8125em;
}
@media screen and (min-width: 768px) {
  .admonition-content pre:is(.listing, .literalblock, .highlight) { font-size: 0.90625em; }
}
@media screen and (min-width: 1280px) {
  .admonition-content pre:is(.listing, .literalblock, .highlight) { font-size: 1em; }
}
/* Client-side highlighters, like Ruby's stylesheet: a highlight.js theme
   paints the `code` (the padding moves there), prettify's theme border and
   narrow padding give way to the listing's. */
pre.highlightjs { padding: 0; }
pre.highlightjs > code { display: block; padding: 1em; border-radius: 4px; }
pre.prettyprint.highlight { padding: 1em; border-width: 0; }
pre.prettyprint { background: var(--adoctra-code-bg); }
pre.prettyprint .linenums { line-height: 1.45; margin: 0 0 1.25em 2em; padding: 0; }
pre.prettyprint li { background: none; list-style-type: inherit; padding-inline-start: 0; }
/* Ruby's line number table (rouge and pygments `linenums`): the theme paints
   the listing, the table only lays out the gutter and the code. */
table.linenotable { border-collapse: separate; border: 0; margin-block-end: 0; background: none; }
table.linenotable td[class] {
  color: inherit;
  vertical-align: top;
  padding: 0;
  line-height: inherit;
  white-space: normal;
}
table.linenotable td.code { padding-inline-start: 0.75em; }
:is(table.linenotable td.linenos, pre.pygments .linenos) {
  border-inline-end: 1px solid;
  opacity: 0.35;
  padding-inline-end: 0.5em;
  user-select: none;
}
pre.pygments span.linenos { display: inline-block; margin-inline-end: 0.75em; }

.stemblock { margin-block-end: 1.25em; }

/* --- Admonitions ---------------------------------------------------------- */

/* Ruby's admonitionblock is a full-width table: an 80px label (or icon)
   cell, which grows only to its longest word or icon, and the content cell
   behind a rule, both vertically centred. The semantic `aside` keeps that
   table layout through CSS, so the columns are sized exactly the same way. */
aside.admonition {
  display: table;
  inline-size: 100%;
  border-collapse: separate;
  overflow-wrap: normal;
  margin-block: 0 1.25em;
}
.admonition-title,
.admonition-content {
  display: table-cell;
  vertical-align: middle;
  line-height: 1.6;
}
.admonition-title {
  inline-size: 80px;
  margin: 0;
  padding: 0.5625em 0.625em;
  font-family: var(--adoctra-heading-font);
  font-size: 1rem;
  letter-spacing: normal;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
}
/* A nested admonition's label inherits the outer content cell's size and
   spacing, like Ruby's unsized `td.icon .title` there. */
.admonition-content .admonition-title { font-size: inherit; letter-spacing: inherit; }
.admonition-title img { max-width: none; }
/* Ruby styles only a text label (its div.title); an icon cell does not. */
.admonition-title:has(> img) {
  font-family: var(--adoctra-font);
  font-weight: normal;
  text-transform: none;
}
/* Ruby's td.content: its text size and spacing reach the children too. */
.admonition-content {
  padding: 0.5625em 1.25em 0.5625em 1.125em;
  border-inline-start: 1px solid var(--adoctra-rule);
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  text-rendering: optimizeLegibility;
  overflow-wrap: anywhere;
}
/* Ruby zeroes the content cell's `:last-child > :last-child`: the inner
   element of a wrapped block (a paragraph's `p`, a list), not the wrapper
   that carries a listing's or image's margin. */
/* An adoctra list is Ruby's wrapped list, so its last item keeps the
   0.625em of Ruby's item `p`. */
/* A nested admonition's margin is Ruby's table's, the inner element zeroed
   there too. */
.admonition-content > :last-child:is(p, ul, ol, dl, aside.admonition),
.admonition-content > :last-child:not(ul, ol) > :last-child { margin-block-end: 0; }

/* `icons=font`: Ruby's Font Awesome glyphs and colours. */
.admonition-title [class^="fa icon-"] {
  font-size: 2.5em;
  text-shadow: 1px 1px 2px rgb(0 0 0 / 0.5);
  cursor: default;
}
.admonition-title .icon-note::before { content: "\f05a"; color: #19407c; }
.admonition-title .icon-tip::before {
  content: "\f0eb";
  text-shadow: 1px 1px 2px rgb(155 155 0 / 0.8);
  color: #111;
}
.admonition-title .icon-warning::before { content: "\f071"; color: #bf6900; }
.admonition-title .icon-caution::before { content: "\f06d"; color: #bf3400; }
.admonition-title .icon-important::before { content: "\f06a"; color: #bf0000; }

/* --- Example blocks ------------------------------------------------------- */

/* Ruby's example: the title above a warm, shadowed box (`.content`). */
.exampleblock > .content {
  display: flow-root;
  margin-block-end: 1.25em;
  padding: 1.25em;
  border: 1px solid #e0e0dc;
  border-radius: 4px;
  background: #fffef7;
  box-shadow: 0 1px 4px #e0e0dc;
}
:is(.exampleblock > .content, .sidebarblock) > :first-child { margin-block-start: 0; }
:is(.exampleblock > .content, .sidebarblock) > :last-child,
:is(.exampleblock > .content, .sidebarblock) > :last-child > :last-child,
:is(.exampleblock > .content, .sidebarblock) :is(ul, ol) > li:last-child > :last-child:not(p) {
  margin-block-end: 0;
}
/* An attached paragraph is Ruby's zeroed `div.paragraph` wrapper around a
   `p` that keeps its item margin (`li p`), so adoctra's `p` keeps it too.
   A qanda item's `p`s are Ruby's own (unwrapped), so the last is zeroed. */
:is(.exampleblock > .content, .sidebarblock) ol.qanda > li:last-child > p:last-child { margin-block-end: 0; }
/* Ruby zeroes the last item `p` of every (nested) list in them; adoctra's
   item text is the `li` itself. */
:is(.exampleblock > .content, .sidebarblock) :is(ul, ol):not(.colist) > li:last-child { margin-block-end: 0; }
/* A description list ending them: Ruby zeroes its `div.dlist` wrapper, the
   `dl` and the last description's last block; adoctra's `p` there stands
   for the wrapper's margin, so it is zeroed too (a nested list keeps
   its own margin, as Ruby's `ul` inside the zeroed `div.ulist`). */
:is(.exampleblock > .content, .sidebarblock) > dl:last-child > dd:last-child > p:last-child { margin-block-end: 0; }

/* A collapsible example (`%collapsible`) is Ruby's `details`: indented,
   with a triangle disclosure marker beside a plain `summary`. */
details {
  margin-block: 0 1.25em;
  margin-inline-start: 1.25rem;
}
details > summary {
  cursor: pointer;
  display: block;
  position: relative;
  line-height: 1.6;
  margin-block-end: 0.625rem;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
details > summary.title {
  margin-block: 0 0.625rem;
  line-height: 1.6;
  font-family: inherit;
  font-size: 1.0625rem;
  font-style: normal;
  font-weight: inherit;
  letter-spacing: -0.01em;
  color: inherit;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::before {
  content: "";
  border: solid transparent;
  border-inline-start: solid;
  border-width: 0.3em 0 0.3em 0.5em;
  position: absolute;
  top: 0.5em;
  inset-inline-start: -1.25rem;
  transform: translateX(15%);
}
details[open] > summary::before {
  border: solid transparent;
  border-block-start: solid;
  border-width: 0.5em 0.3em 0;
  transform: translateY(15%);
}
details > summary::after {
  content: "";
  inline-size: 1.25rem;
  block-size: 1em;
  position: absolute;
  top: 0.3em;
  inset-inline-start: -1.25rem;
}
details > :last-child { margin-block-end: 0; }

/* --- Sidebar blocks ------------------------------------------------------- */

/* Ruby's sidebar: a grey box holding its centred heading-style title. */
.sidebarblock {
  display: flow-root;
  margin-block-end: 1.25em;
  padding: 1.25em;
  border: 1px solid #dbdbd6;
  border-radius: 4px;
  background: #f3f3f2;
}
/* Its own title is the aside's `header` (Ruby's `.content>.title`); a child
   block's title `div` keeps the ordinary block title style. */
.sidebarblock > header.title {
  font-family: var(--adoctra-heading-font);
  font-weight: 300;
  font-style: normal;
  font-size: 1.375em;
  line-height: 1.2;
  word-spacing: -0.05em;
  margin-block: 0 0.5em;
  color: var(--adoctra-title-fg);
  text-align: center;
}
@media screen and (min-width: 768px) {
  .sidebarblock > header.title { font-size: 1.6875em; }
}

/* --- Open blocks --------------------------------------------------------- */

/* A generic, visually transparent grouping container: like Ruby's
   openblock it has no box or margin of its own, so the children's margins
   pass through it. */

/* --- Quote and verse blocks ---------------------------------------------- */

/* Ruby's quote: an indented, shrink-wrapped block of large italic text with
   a hanging opening quotation mark and a right-aligned attribution. */
.quoteblock {
  display: table;
  margin: 0 1em 1.25em 1.5em;
}
.quoteblock:not(.excerpt) > .title { margin-inline-start: -1.5em; margin-block-end: 0.75em; }
.quoteblock :is(blockquote, p) {
  color: rgb(0 0 0 / 0.85);
  font-size: 1.15rem;
  line-height: 1.75;
  word-spacing: 0.1em;
  letter-spacing: 0;
  font-style: italic;
  text-align: justify;
}
.quoteblock blockquote { margin: 0; padding: 0; border: 0; }
.quoteblock blockquote::before {
  content: "\201c";
  float: inline-start;
  font-size: 2.75em;
  font-weight: bold;
  line-height: 0.6em;
  margin-inline-start: -0.6em;
  color: var(--adoctra-title-fg);
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.1);
}
.quoteblock blockquote > p:last-child { margin-block-end: 0; }
/* Ruby's `.quoteblock p` also styles a list item's text `p`; adoctra's item
   text is the `li` itself (above the list item rules' specificity). */
.quoteblock blockquote :is(ul, ol) > li {
  font-size: 1.15rem;
  line-height: 1.75;
  word-spacing: 0.1em;
  letter-spacing: 0;
  text-align: justify;
}
.quoteblock figcaption { margin-block-start: 0.75em; margin-inline-end: 0.5ex; text-align: end; }
.verseblock { margin: 0 1em 1.25em; }
.verseblock pre {
  font-family: var(--adoctra-heading-font);
  font-size: 1.15rem;
  color: rgb(0 0 0 / 0.85);
  font-weight: 300;
  text-rendering: optimizeLegibility;
}
.verseblock pre strong { font-weight: 400; }
.verseblock figcaption { margin-block-start: 1.25rem; margin-inline-start: 0.5ex; }
:is(.quoteblock, .verseblock) figcaption {
  font-size: 0.9375em;
  line-height: 1.45;
  font-style: italic;
}
/* The cited work is a line of its own (without the `br` before it). */
:is(.quoteblock, .verseblock) figcaption br { display: none; }
:is(.quoteblock, .verseblock) figcaption cite {
  display: block;
  letter-spacing: -0.025em;
  color: rgb(0 0 0 / 0.6);
}
/* An abstract (and a quote nested in a quote) drops the quotation mark. */
:is(.quoteblock.abstract, .quoteblock.excerpt, .quoteblock .quoteblock) blockquote::before { display: none; }
:is(.quoteblock.abstract, .quoteblock.excerpt, .quoteblock .quoteblock) :is(blockquote, p) {
  line-height: 1.6;
  word-spacing: 0;
}
.quoteblock.abstract { margin: 0 1em 1.25em; display: block; }
.quoteblock.abstract > .title { margin: 0 0 0.375em; font-size: 1.15em; text-align: center; }
:is(.quoteblock.excerpt, .quoteblock .quoteblock) {
  margin-inline-start: 0;
}
.quoteblock.excerpt > blockquote,
.quoteblock .quoteblock {
  padding: 0 0 0.25em 1em;
  border-inline-start: 0.25em solid var(--adoctra-rule);
}
:is(.quoteblock.excerpt, .quoteblock .quoteblock) :is(blockquote, p) {
  color: inherit;
  font-size: 1.0625rem;
}
:is(.quoteblock.excerpt, .quoteblock .quoteblock) blockquote :is(ul, ol) > li {
  font-size: 1.0625rem;
  line-height: 1.6;
  word-spacing: 0;
}
:is(.quoteblock.excerpt, .quoteblock .quoteblock) figcaption {
  color: inherit;
  font-size: 0.85rem;
  text-align: start;
  margin-inline-end: 0;
}

/* --- Table of contents ---------------------------------------------------- */

/* The `#toc` nav of nested `sectlevelN` lists, styled like Ruby's
   `#toc`: a plain list under the header title, a box inside the content
   (preamble or `toc::[]`), a sidebar with `toc2` (above). */
#toc { border-block-end: 1px solid var(--adoctra-section-rule); padding-block-end: 0.5em; }
#header > h1:first-child + #toc { border-block-start: 1px solid var(--adoctra-rule); }
#toc > ul { margin-inline-start: 0.125em; }
#toc ul {
  font-family: var(--adoctra-heading-font);
  list-style-type: none;
  margin-block-end: 1.25em;
}
#toc ul ul { margin-inline-start: 1.25em; margin-block-end: 0; }
#toc li { line-height: 1.3334; margin-block-start: 0.3334em; }
#toc ul.sectlevel0 > li > a { font-style: italic; }
#toc ul.sectlevel0 ul.sectlevel1 { margin: 0.5em 0; }
#toc a { text-decoration: none; }
#toc a:active { text-decoration: underline; }
#toctitle {
  font-family: var(--adoctra-heading-font);
  font-weight: 300;
  font-style: normal;
  font-size: 1.2em;
  line-height: 1.2;
  word-spacing: -0.05em;
  margin-block: 1em 0.5em;
  color: var(--adoctra-title-fg);
}
@media screen and (min-width: 768px) {
  #toctitle { font-size: 1.375em; }
}
#content #toc {
  border: 1px solid #e0e0dc;
  margin-block-end: 1.25em;
  padding: 1.25em;
  background: var(--adoctra-sidebar-bg);
  border-radius: 4px;
}
#content #toc > :first-child { margin-block-start: 0; }
#content #toc > :last-child { margin-block-end: 0; }

/* --- Images (`image::target[]`), video and audio -------------------------- */

/* Ruby's imageblock/videoblock/audioblock: the media, a trailing (image)
   or leading (video, audio) title, a bottom margin. */
figure:is(.imageblock, .videoblock, .audioblock) { margin: 0 0 1.25em; }
img, object, svg { display: inline-block; vertical-align: middle; }
img, object, embed { max-width: 100%; height: auto; }
figure.imageblock > figcaption.title { margin-block-end: 0; }
figure:is(.videoblock, .audioblock) > figcaption.title { margin-block: 0 0.25em; }
figure.videoblock iframe { border: 0; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
.text-justify { text-align: justify !important; }
figure.imageblock.left { float: left; margin: 0.25em 0.625em 1.25em 0; }
figure.imageblock.right { float: right; margin: 0.25em 0 1.25em 0.625em; }
figure.videoblock.left { float: left; }
figure.videoblock.right { float: right; }
span:is(.image, .icon) img { max-inline-size: 100%; block-size: auto; }
span.image:is(.left, .right) { margin-block: 0.25em; display: inline-block; line-height: 0; }
span.image.left { float: left; margin-inline-end: 0.625em; }
span.image.right { float: right; margin-inline-start: 0.625em; }
/* Ruby's thumbnail roles: a white frame with a hairline shadow. */
.thumb, .th { line-height: 0; display: inline-block; border: 4px solid #fff; box-shadow: 0 0 0 1px #ddd; }
figure.imageblock:is(.thumb, .th) { border-width: 6px; }
figure.imageblock:is(.thumb, .th) > figcaption.title { padding: 0 0.125em; }
a.image { text-decoration: none; display: inline-block; }
a.image object { pointer-events: none; }

/* --- Block titles (`.Title`) --------------------------------------------- */

/* Ruby's block title: an italic serif line in its title colour. */
.title {
  margin-block: 0 0.25em;
  font-family: var(--adoctra-font);
  font-size: 1rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.45;
  text-align: start;
  color: var(--adoctra-title-fg);
  text-rendering: optimizeLegibility;
}

/* --- Tables (`|===`) ----------------------------------------------------- */
/* Ruby's table rules: frame/grid/stripes classes set border widths of one
 * #dedede rule colour, header/footer rows are tinted, cells carry their
 * own horizontal and vertical alignment classes. */

table {
  border-collapse: collapse;
  border-spacing: 0;
  background: #fff;
  margin-block-end: 1.25em;
  border: 1px solid #dedede;
  overflow-wrap: normal;
}
table :is(thead, tfoot) { background: #f7f8f7; }
table :is(thead, tfoot) tr :is(th, td) {
  padding: 0.5em 0.625em 0.625em;
  font-size: inherit;
  color: var(--adoctra-fg);
  text-align: start;
}
table tr :is(th, td) {
  padding: 0.5625em 0.625em;
  font-size: inherit;
  color: var(--adoctra-fg);
  line-height: 1.6;
}
table tr:is(.even, .alt) { background: #f8f8f7; }
table.tableblock.stretch { inline-size: 100%; }
/* Ruby sets no width for `fit-content`, so `.stretch` (`%autowidth.stretch`) wins. */
table.tableblock.fit-content:not(.stretch) { inline-size: auto; }
table.tableblock.fit-content > caption.title { white-space: nowrap; inline-size: 0; }
table.tableblock.left { float: inline-start; margin-inline-end: 0.625em; }
table.tableblock.right { float: inline-end; margin-inline-start: 0.625em; }
table.tableblock > caption.title { caption-side: top; text-align: start; }
p.tableblock { font-size: 1em; }
p.tableblock:last-child { margin-block-end: 0; }
p.tableblock > code:only-child { background: none; padding: 0; }
td.tableblock > .content { margin-block-end: 1.25em; overflow-wrap: anywhere; }
/* Ruby's -1.25em is on a 16px wrapper; adoctra's last child may be a `p`. */
td.tableblock > .content > :last-child { margin-block-end: -1.25rem; }
td.tableblock > div.literal > pre { margin: 0; }
table.tableblock, th.tableblock, td.tableblock { border: 0 solid #dedede; }
table.grid-all > * > tr > * { border-width: 1px; }
table.grid-cols > * > tr > * { border-width: 0 1px; }
table.grid-rows > * > tr > * { border-width: 1px 0; }
table.frame-all { border-width: 1px; }
table.frame-ends { border-width: 1px 0; }
table.frame-sides { border-width: 0 1px; }
table:is(.frame-none, .frame-sides) > colgroup + * > :first-child > * { border-block-start-width: 0; }
table:is(.frame-none, .frame-sides) > :last-child > :last-child > * { border-block-end-width: 0; }
table:is(.frame-none, .frame-ends) > * > tr > :first-child { border-inline-start-width: 0; }
table:is(.frame-none, .frame-ends) > * > tr > :last-child { border-inline-end-width: 0; }
table.stripes-all > * > tr,
table.stripes-odd > * > tr:nth-of-type(odd),
table.stripes-even > * > tr:nth-of-type(even),
table.stripes-hover > * > tr:hover { background: #f8f8f7; }
:is(th, td).halign-left { text-align: left; }
:is(th, td).halign-right { text-align: right; }
:is(th, td).halign-center { text-align: center; }
:is(th, td).valign-top { vertical-align: top; }
:is(th, td).valign-bottom { vertical-align: bottom; }
:is(th, td).valign-middle { vertical-align: middle; }
table :is(thead, tfoot) th { font-weight: bold; }
tbody tr th { background: #f7f8f7; }
:is(tbody, tfoot) tr th, :is(tbody, tfoot) tr th p { color: var(--adoctra-fg); font-weight: bold; }

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

/* Ruby's footnote markers and list (also inside AsciiDoc table cells). */
sup, sub { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { inset-block-start: -0.5em; }
sub { inset-block-end: -0.25em; }
sup.footnote, sup.footnoteref { font-size: 0.875em; position: static; vertical-align: super; }
sup:is(.footnote, .footnoteref) a { text-decoration: none; }
sup:is(.footnote, .footnoteref) a:active,
#footnotes .footnote a:first-of-type:active { text-decoration: underline; }
#footnotes { padding-block: 0.75em; margin-block-end: 0.625em; }
#content #footnotes { margin-block: -0.625em 0; padding: 0.75em 0; }
#footnotes hr {
  inline-size: 20%;
  min-inline-size: 6.25em;
  margin: -0.25em 0 0.75em;
  border-width: 1px 0 0;
}
#footnotes .footnote {
  padding: 0 0.375em 0 0.225em;
  line-height: 1.3334;
  font-size: 0.875em;
  margin-inline-start: 1.2em;
  margin-block-end: 0.2em;
  text-rendering: optimizeLegibility;
}
#footnotes .footnote strong { letter-spacing: -0.005em; }
#footnotes .footnote a:first-of-type {
  font-weight: bold;
  text-decoration: none;
  margin-inline-start: -1.05em;
}
#footnotes .footnote:last-of-type { margin-block-end: 0; }

/* --- Lists ----------------------------------------------------------------- */

/* Ruby's lists indent with a margin (no padding). Its item text is a `p`
   (17px, a 0.625em gap); adoctra's is the item's own text, so the item gets
   that size and its block children return to the 16px base. */
ul, ol, dl {
  margin: 0 0 1.25em;
  padding: 0;
  line-height: 1.6;
  list-style-position: outside;
}
ul, ol { margin-inline-start: 1.5em; }
ol { margin-inline-start: 1.75em; }
li :is(ul, ol) { margin-inline-start: 1.25em; margin-block-end: 0.625em; }
ul li ol { margin-inline-start: 1.5em; }
:is(ul, ol):not([class^="sectlevel"]) > li {
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  margin-block-end: 0.625em;
}
:is(ul, ol):not([class^="sectlevel"]) > li::marker { font-size: 1rem; letter-spacing: normal; }
:is(ul, ol):not([class^="sectlevel"]) > li > :is(div, ul, ol, dl, table, figure, aside, details, nav, blockquote, hr) {
  font-size: 1rem;
  letter-spacing: normal;
}
/* In an admonition Ruby's block wrappers inherit the content cell's 17px
   (a nested list's 1.25em indent is 21.25px there, not 20px). */
.admonition-content :is(ul, ol):not([class^="sectlevel"]) > li > :is(div, ul, ol, dl, table, figure, aside, details, nav, blockquote, hr) {
  font-size: inherit;
}
:is(ul, ol):not([class^="sectlevel"]) > li strong { letter-spacing: -0.005em; }
/* That is Ruby's `p strong` (the item text); bold text in a verbatim block
   of the item keeps the block's spacing. */
:is(ul, ol):not([class^="sectlevel"]) > li pre strong { letter-spacing: inherit; }
:is(ul, ol):not([class^="sectlevel"]) > li > pre { letter-spacing: normal; }
/* The gap Ruby's item `p` leaves before the item's first block (inline
   markup in the item text does not count). A qanda item starts with its
   question `p`, which is Ruby's item text itself. */
:is(ul, ol):not([class^="sectlevel"], .qanda) > li > :is(p, div, ul, ol, dl, pre, table, figure, aside, details, nav, blockquote, hr):not(:is(p, div, ul, ol, dl, pre, table, figure, aside, details, nav, blockquote, hr) ~ *) {
  margin-block-start: 0.6640625rem;
}
/* In a sidebar Ruby's item `p` is 1em (16px), so the gap is 0.625rem. */
.sidebarblock :is(ul, ol):not([class^="sectlevel"], .qanda) > li > :is(p, div, ul, ol, dl, pre, table, figure, aside, details, nav, blockquote, hr):not(:is(p, div, ul, ol, dl, pre, table, figure, aside, details, nav, blockquote, hr) ~ *) {
  margin-block-start: 0.625rem;
}
/* An item ending in a block ends, like Ruby's, with that block's margin
   (a nested list's 0.625em of 16px), not the 0.625em of its text. */
:is(ul, ol):not([class^="sectlevel"]) > li:has(> :is(p, div, ul, ol, dl, pre, table, figure, aside, details, nav, blockquote, hr):last-child) {
  margin-block-end: 0;
}
li p { margin-block-end: 0.625em; }
ul.circle { list-style-type: circle; }
ul.disc { list-style-type: disc; }
ul.square { list-style-type: square; }
ol.arabic { list-style-type: decimal; }
ol.decimal { list-style-type: decimal-leading-zero; }
ol.loweralpha { list-style-type: lower-alpha; }
ol.upperalpha { list-style-type: upper-alpha; }
ol.lowerroman { list-style-type: lower-roman; }
ol.upperroman { list-style-type: upper-roman; }
ol.lowergreek { list-style-type: lower-greek; }
/* Ruby pulls a checklist item's first `p` back by 1em (17px); adoctra's item
   text is the `li` itself, so its blocks get that 17px back. */
ul.checklist { list-style: none; }
ul.checklist > li { margin-inline-start: -1em; }
ul.checklist > li > :is(p, div, dl, pre, table, figure, aside, details, nav, blockquote, hr) { margin-inline-start: 1.0625rem; }
ul.checklist > li > :is(ul, ol) { margin-inline-start: calc(1.25em + 1.0625rem); }
ul.checklist > li > :is(.fa-square-o, .fa-check-square-o):first-child {
  width: 1.25em;
  font-size: 0.8em;
  position: relative;
  bottom: 0.125em;
}
ul.checklist > li > input[type="checkbox"]:first-child { margin-inline-end: 0.25em; }
/* Ruby's normalize for form controls (an interactive checklist's boxes). */
button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0; }
button, input { line-height: normal; }
input:is([type="checkbox"], [type="radio"]) { padding: 0; }
/* Ruby's unmarked list styles; `inline` lays the items out in a row. */
:is(ul, ol):is(.none, .no-bullet, .unstyled), ol.unnumbered { list-style-type: none; }
:is(ul, ol).no-bullet, ol.unnumbered { margin-inline-start: 0.625em; }
:is(ul, ol).unstyled { margin-inline-start: 0; }
ul.inline { display: flex; flex-flow: row wrap; list-style: none; margin: 0 0 0.625em -1.25em; }
/* Ruby's 1.25em is on a 16px `li` (its text is a `p`); adoctra's `li` is 17px. */
ul.inline > li { margin-inline-start: 1.25rem; }
:is(dl.unstyled, .unstyled dl) dt { font-weight: 400; font-style: normal; }
dl dt { margin-block-end: 0.3125em; font-weight: bold; }
dl dd { margin: 0 0 1.25em 1.125em; }
/* Ruby zeroes the last description's last *wrapper*: a listing's, image's
   or table's margin, not a paragraph's or a list's (inside their wrapper). */
dl dd:last-child,
dl dd:last-child > :last-child:is(pre, figure, table, details, aside) { margin-block-end: 0; }
:is(ul, ol) dd { margin-block-end: 0.625em; }
/* A horizontal description list is Ruby's borderless layout table: each
   `<div>` entry is a row, a term (or several, stacked like Ruby's `<br>`s in
   one anonymous cell) and its description are cells with Ruby's padding.
   `labelwidth`/`itemwidth` are Ruby's `<col>` widths. */
dl.hdlist { display: table; border-collapse: collapse; border-spacing: 0; overflow-wrap: normal; }
dl.hdlist > div { display: table-row; }
dl.hdlist > div > dt {
  margin: 0;
  padding: 0 0.625em;
  font-weight: bold;
  font-size: 1.0625rem;
  letter-spacing: normal;
}
dl.hdlist > div > dt:last-of-type { padding-block-end: 1.25em; }
dl.hdlist > div > dt:only-of-type {
  display: table-cell;
  vertical-align: top;
  inline-size: var(--adoctra-hdlist-labelwidth, auto);
}
dl.hdlist > div > dd {
  display: table-cell;
  vertical-align: top;
  margin: 0;
  padding: 0 0.625em;
  overflow-wrap: anywhere;
  inline-size: var(--adoctra-hdlist-itemwidth, auto);
}

/* --- Callouts -------------------------------------------------------------- */

/* As Asciidoctor's default stylesheet: a plain mark is bold text `(1)`; a
 * font icon (`icons: font`) is a dark circle with its number. */
b.conum * { color: inherit !important; }
.conum:not([data-value]):empty { display: none; }
.conum[data-value] {
  display: inline-block;
  color: #fff !important;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 50%;
  text-align: center;
  font-size: 0.75em;
  inline-size: 1.67em;
  block-size: 1.67em;
  line-height: 1.67em;
  font-family: "Open Sans", "DejaVu Sans", sans-serif;
  font-style: normal;
  font-weight: bold;
}
.conum[data-value] * { color: #fff !important; }
.conum[data-value] + b { display: none; }
.conum[data-value]::after { content: attr(data-value); }
pre .conum[data-value] { position: relative; top: -0.125em; }
/* Image callout icons sit on the middle of the line, like Ruby's `img` rule. */
pre img { vertical-align: middle; }
pre + ol.colist { margin-block-start: -0.5em; }
/* With icons the callout list is Ruby's two columns: the icon, then the text. */
/* Ruby's rows are table cells: no list indent, item gap or item `p` gap,
   and cells at the 16px base. */
ol.colist.icons { list-style: none; padding-inline-start: 0; margin-inline-start: 0; }
ol.colist.icons > li { display: grid; grid-template-columns: auto 1fr; margin-block-end: 0; }
/* Ruby's icon callouts are a table, whose 1.25em margin (16px text) stays
   inside a list item, unlike a nested list's 0.625em. */
li ol.colist.icons { margin-block-end: 1.25rem; }
ol.colist.icons > li > .colist-icon { padding: 0.4em 0.75em 0; line-height: 1; font-size: 1rem; }
ol.colist.icons > li > .colist-icon img { max-width: none; vertical-align: middle; }
ol.colist.icons > li > div { padding: 0.25em 0; margin-block-start: 0; }

/* --- Keyboard, button and menu macros (experimental) ----------------------- */

kbd {
  display: inline-block;
  font-family: var(--adoctra-mono);
  font-size: 0.65em;
  line-height: 1.45;
  color: rgb(0 0 0 / 0.8);
  background: #f7f7f7;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.2), inset 0 0 0 0.1em #fff;
  margin-inline: 0.15em;
  padding: 0.2em 0.5em;
  vertical-align: middle;
  position: relative;
  inset-block-start: -0.1em;
  white-space: nowrap;
}
.keyseq { color: rgb(51 51 51 / 0.8); }
.menuseq, .menuref { color: #000; }
.keyseq kbd:first-child { margin-inline-start: 0; }
.keyseq kbd:last-child { margin-inline-end: 0; }
.menuseq b:not(.caret), .menuref { font-weight: inherit; }
.menuseq { word-spacing: -0.02em; }
.menuseq b.caret { font-size: 1.25em; line-height: 0.8; }
.menuseq i.caret { font-weight: bold; text-align: center; inline-size: 0.45em; }
b.button::before, b.button::after { position: relative; inset-block-start: -1px; font-weight: 400; }
b.button::before { content: "["; padding-inline: 2px 3px; }
b.button::after { content: "]"; padding-inline: 3px 2px; }

/* --- Built-in roles -------------------------------------------------------- */
/* Ruby's text roles, last so that a role wins over component colours of the
   same specificity (`[.red]#text#`, `[.yellow-background]`, an unresolved
   footnote reference). Colours are Asciidoctor's. */

/* Ruby hangs a block's role on a wrapper whose content sets its own colour
   (verbatim `pre`, admonition content, quote/verse text, table cells,
   section titles, code), so a colour role on the block does not reach that
   text; a role on the inner element itself still applies. adoctra puts block
   roles on the element, so these keep the content colour (and the verbatim
   background) with a higher specificity than a role. */
h1, h2, h3, h4, h5, h6 { color: var(--adoctra-heading-fg); }
#header > h1:first-child { color: rgb(0 0 0 / 0.85); }
code, pre { color: var(--adoctra-code-fg); }
pre :is(code, pre) { color: inherit; }
pre:is(.listing, .literalblock, .highlight) { color: var(--adoctra-code-fg); }
pre:is(.listing, .literalblock, .highlight:is([class="highlight"], [class^="highlight "])) {
  background: var(--adoctra-code-bg);
}
aside.admonition > .admonition-title { color: var(--adoctra-fg); }
aside.admonition > .admonition-content {
  color: color-mix(in srgb, var(--adoctra-fg) 75%, transparent);
}
.quoteblock :is(blockquote, p),
.verseblock pre { color: rgb(0 0 0 / 0.85); }
table.tableblock :is(th, td) { color: var(--adoctra-fg); }
/* Ruby's `[.output]` literal: light text on a dark terminal background. */
pre.literalblock.output { color: #f7f7f8; background: rgb(0 0 0 / 0.9); }

.big { font-size: larger; }
.small { font-size: smaller; }
.underline { text-decoration: underline; }
.overline { text-decoration: overline; }
.line-through { text-decoration: line-through; }
.aqua { color: #00bfbf; }
.aqua-background { background: #00fafa; }
.black { color: #000; }
.black-background { background: #000; }
.blue { color: #0000bf; }
.blue-background { background: #0000fa; }
.fuchsia { color: #bf00bf; }
.fuchsia-background { background: #fa00fa; }
.gray { color: #606060; }
.gray-background { background: #7d7d7d; }
.green { color: #006000; }
.green-background { background: #007d00; }
.lime { color: #00bf00; }
.lime-background { background: #00fa00; }
.maroon { color: #600000; }
.maroon-background { background: #7d0000; }
.navy { color: #000060; }
.navy-background { background: #00007d; }
.olive { color: #606000; }
.olive-background { background: #7d7d00; }
.purple { color: #600060; }
.purple-background { background: #7d007d; }
.red { color: #bf0000; }
.red-background { background: #fa0000; }
.silver { color: #909090; }
.silver-background { background: #bcbcbc; }
.teal { color: #006060; }
.teal-background { background: #007d7d; }
.white { color: #bfbfbf; }
.white-background { background: #fafafa; }
.yellow { color: #bfbf00; }
.yellow-background { background: #fafa00; }

/* --- Roles ----------------------------------------------------------------- */

/* The utility roles of Ruby's default stylesheet. */
.hide { display: none; }
/* Ruby sets `subheader` on a block's wrapper `div`; only its inherited
   colour and weight reach the element, which keeps its own margins. */
.subheader { color: #7a2518; font-weight: 400; }
.center { margin-inline: auto; }
.clearfix::before, .clearfix::after, .float-group::before, .float-group::after { content: " "; display: table; }
.clearfix::after, .float-group::after { clear: both; }
:not(pre).nobreak { overflow-wrap: normal; }
:not(pre).pre-wrap { white-space: pre-wrap; }
.print-only { display: none !important; }
@media print {
  .hide-on-print, .hide-for-print { display: none !important; }
  .print-only { display: block !important; }
  .show-for-print { display: inherit !important; }
}