/* Demiurge.  A painting of the sun breaking through swirling clouds is fixed behind every page; on it, the text on plates
   of cool atlas paper ruled in gilt, and a bar of dark glass for the menu.  Forum (a grand classical face) for the
   headings, Gentium for reading.  Nothing moves. */
:root {
  --night: #0d1424;
  --night-hi: #1a2646;
  --paper: #e6e3d6;
  --paper-edge: #f1efe5;
  --ink: #1a2133;
  --ink-soft: #4b5468;
  --gilt: #c9a24a;
  --gilt-soft: #a58b52;
  --rule: #c8c1a6;
  --link: #1d4e79;
  --link-hover: #8a5a12;
  --built: #2f6a3a;
  --partial: #9a6a12;
  --todo: #8e2a2a;
  --head: "Forum", "Gentium Book Plus", Georgia, serif;
  --serif: "Gentium Book Plus", "Gentium Plus", Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Code", Consolas, "SF Mono", Menlo, monospace;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --leaf: 46rem;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; }
body {
  margin: 0; color: var(--ink); min-height: 100vh; display: flex; flex-direction: column;
  background-color: var(--night);
  font-family: var(--serif); font-size: 1.2rem; line-height: 1.62; font-kerning: normal;
}
a { color: var(--link); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--link-hover); }
a:focus-visible, input:focus-visible { outline: 2px solid var(--gilt); outline-offset: 3px; }
.wrap { width: min(100%, calc(var(--leaf) + 2 * var(--gutter))); margin-inline: auto; padding-inline: var(--gutter); }

/* the painting: fixed behind the page; a light shade at the head and a heavier one at the foot keep the menu and the
   foot legible, and the middle of the picture is left as it is */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(8, 11, 22, 0.30) 0, rgba(8, 11, 22, 0) 9rem, rgba(8, 11, 22, 0) 62%, rgba(8, 11, 22, 0.55) 100%),
    url("background.jpg") center / cover no-repeat var(--night);
}

/* ---- name, menu, search ---------------------------------------------------------------------------- */
/* the menu: a bar of dark glass as wide as the plate below it (wider above the reference's sections) */
.bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.6rem;
  width: min(100% - 2 * var(--gutter), var(--leaf)); margin: 1.1rem auto 0; padding: 0.7rem 1.3rem;
  background: rgba(10, 14, 28, 0.68); border: 1px solid rgba(201, 162, 74, 0.55); border-radius: 0.5rem;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
body.wide .bar { width: min(100% - 2 * var(--gutter), 76rem); }
.bar a { text-decoration: none; }
.wordmark { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--head); font-size: 1.7rem; letter-spacing: 0.06em; color: var(--gilt); margin-inline-end: auto; }
.wordmark:hover { color: #e6c36f; }
.mark { width: 1.7rem; height: 1.7rem; }
.sections { display: flex; gap: 1.5rem; font-family: var(--head); font-size: 1.05rem; letter-spacing: 0.03em; }
.sections a { color: #e6dfc7; padding-block: 0.15rem; border-block-end: 1px solid transparent; }
.sections a:hover { border-block-end-color: var(--gilt-soft); color: #e6dfc7; }
.sections a[aria-current] { border-block-end-color: var(--gilt); }
.search { position: relative; }
.search input {
  font: 0.95rem var(--sans); width: 13.5rem; max-width: 100%; padding: 0.4rem 0.7rem; color: #e6dfc7; background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--gilt-soft); border-radius: 0.35rem;
}
.search input::placeholder { color: #a9a58f; }
#hits { display: none; position: absolute; inset-inline-end: 0; top: calc(100% + 0.4rem); z-index: 20; width: min(26rem, 90vw);
  background: var(--paper-edge); border: 1px solid var(--gilt-soft); border-radius: 0.4rem; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.6); }
#hits.open { display: block; }
#hits a { display: block; padding: 0.55rem 0.8rem; color: var(--ink); text-decoration: none; border-block-end: 1px solid var(--rule); }
#hits a:last-child { border-block-end: 0; }
#hits a:hover, #hits a:focus-visible { background: #ddd9c6; }
#hits strong { display: block; font-family: var(--head); font-weight: 400; font-size: 1.05rem; color: var(--link); }
#hits span { display: block; font: 0.85rem/1.4 var(--sans); color: var(--ink-soft); }
#hits .none { margin: 0; padding: 0.7rem 0.8rem; font: 0.9rem var(--sans); color: var(--ink-soft); }

/* ---- the plate: a leaf of atlas paper ruled in gilt ------------------------------------------------ */
.leaf {
  width: min(calc(100% - 2 * var(--gutter)), var(--leaf)); margin: 1.1rem auto 3.2rem; position: relative; z-index: 1;
  background: var(--paper); border: 1px solid var(--gilt-soft); box-shadow: 0 0 0 5px var(--paper), 0 0 0 6px var(--gilt-soft), 0 30px 50px -30px #000;
}
.leaf-in { padding: 3rem clamp(1.4rem, 7vw, 4rem) 3rem; outline: 1px solid rgba(165, 139, 82, 0.55); outline-offset: -9px; }
h1 { font-family: var(--head); font-weight: 400; font-size: clamp(2.3rem, 7vw, 3.6rem); line-height: 1.1; color: var(--ink); text-align: center; margin: 0 0 0.8rem; letter-spacing: 0.02em; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lead { font-family: var(--head); font-size: 1.35rem; line-height: 1.45; color: var(--ink-soft); text-align: center; max-width: 32rem; margin: 0 auto 1.8rem; padding-block-end: 1.4rem;
  background: linear-gradient(var(--gilt-soft), var(--gilt-soft)) center bottom / 6rem 1px no-repeat; }
.text { max-width: 36rem; margin-inline: auto; }
.text p, .doc p { margin: 0 0 1rem; }
h2 { font-family: var(--head); font-weight: 400; font-size: 1.75rem; line-height: 1.2; color: var(--link); margin: 2.6rem 0 0.5rem; padding-block-start: 1.4rem; border-block-start: 1px solid var(--rule); }
h3 { font-family: var(--head); font-weight: 400; font-size: 1.35rem; color: var(--ink); margin: 1.9rem 0 0.4rem; }
ul, ol { padding-inline-start: 1.4rem; margin: 0 0 1rem; }
li { margin-block: 0.4rem; }
li::marker { color: var(--gilt-soft); }
code { font-family: var(--mono); font-size: 0.85em; background: rgba(26, 33, 51, 0.07); padding: 0.05em 0.3em; border-radius: 0.2rem; }
pre { font-family: var(--mono); font-size: 0.82rem; line-height: 1.55; background: #141c30; color: #e6dfc7; padding: 1rem 1.1rem; border-radius: 0.35rem; overflow-x: auto; margin: 0 0 1.2rem; }
pre code { background: none; padding: 0; font-size: inherit; }
.table-wrap { overflow-x: auto; margin: 0 0 1.3rem; }
table { border-collapse: collapse; width: 100%; font: 0.92rem/1.45 var(--sans); }
th, td { text-align: start; vertical-align: top; padding: 0.5rem 0.65rem; border-block-end: 1px solid var(--rule); }
th { font-family: var(--head); font-weight: 400; font-size: 1rem; color: var(--ink-soft); border-block-end: 1px solid var(--gilt-soft); }
td:first-child { color: var(--ink); }
blockquote { margin: 0 0 1.2rem; padding: 0.2rem 1.1rem; border-inline-start: 3px solid var(--gilt-soft); color: var(--ink-soft); }
blockquote.note { border-inline-start-color: var(--partial); background: rgba(154, 106, 18, 0.07); }
.note-label { font: 0.8rem var(--sans); letter-spacing: 0.04em; color: var(--partial); margin: 0.4rem 0 0.1rem !important; }
.version { text-align: center; font: 0.9rem var(--sans); color: var(--ink-soft); margin: 0 0 1.2rem; }

/* status of a section: a quiet tag, and the "still to build" notes */
.pill { display: inline-block; font: 0.78rem/1.4 var(--sans); padding: 0.05rem 0.55rem; border-radius: 1rem; border: 1px solid currentColor; vertical-align: 0.1em; }
.pill.built { color: var(--built); } .pill.partial { color: var(--partial); }
.status-line { margin: 0 0 1.2rem; }
h3.todo, h2.todo { color: var(--todo); font-size: 1.2rem; margin-block-start: 1.9rem; }
.todo .tag { display: inline-block; font: 0.75rem/1.4 var(--sans); color: var(--todo); border: 1px solid var(--todo); border-radius: 1rem; padding: 0.05rem 0.55rem; margin-inline-end: 0.5rem; vertical-align: 0.15em; }

/* the contents page of the reference */
.contents { list-style: none; padding: 0; margin: 2rem 0 0; }
.contents li { margin: 0; padding: 0.9rem 0; border-block-start: 1px solid var(--rule); }
.contents a.sec { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.2rem 0.7rem; text-decoration: none; font-family: var(--head); font-size: 1.35rem; color: var(--link); }
.contents a.sec:hover { color: var(--link-hover); }
.contents .n { color: var(--gilt-soft); min-width: 1.6rem; }
.contents p { margin: 0.15rem 0 0 2.3rem; font-size: 1rem; color: var(--ink-soft); }

/* ---- the reference: contents beside the page ------------------------------------------------------- */
.docs { width: min(100% - 2 * var(--gutter), 76rem); margin: 1.1rem auto 3.2rem; position: relative; z-index: 1; }
.docs-grid { display: grid; grid-template-columns: 17rem minmax(0, 1fr); background: var(--paper); border: 1px solid var(--gilt-soft); box-shadow: 0 0 0 5px var(--paper), 0 0 0 6px var(--gilt-soft), 0 30px 50px -30px #000; }
.toc { padding: 1.6rem 1.1rem 1.6rem 1.4rem; border-inline-end: 1px solid var(--rule); font: 0.95rem/1.35 var(--sans); align-self: start; position: sticky; top: 0; max-height: 100vh; overflow-y: auto; }
.toc-title { font-family: var(--head); font-size: 1.15rem; margin: 0 0 0.7rem; }
.toc-title a { color: var(--ink); text-decoration: none; }
.toc ol { list-style: none; padding: 0; margin: 0; }
.toc li { margin: 0; }
.toc a { display: block; padding: 0.3rem 0.5rem; margin-inline: -0.5rem; color: var(--ink-soft); text-decoration: none; border-radius: 0.25rem; }
.toc a:hover { background: rgba(26, 33, 51, 0.07); color: var(--ink); }
.toc a[aria-current] { color: var(--ink); background: rgba(201, 162, 74, 0.25); }
.doc { padding: 2.4rem clamp(1.2rem, 4vw, 3.2rem) 2.6rem; max-width: 50rem; }
.doc h1 { text-align: start; font-size: clamp(1.9rem, 5vw, 2.7rem); margin-bottom: 1.1rem; }
.doc h2 { font-size: 1.5rem; }
.pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.4rem; padding-top: 1.1rem; border-top: 1px solid var(--rule); font-family: var(--head); font-size: 1.05rem; }
.pager a { text-decoration: none; max-width: 48%; }
.pager .prev::before { content: "\2190\00a0"; } .pager .next { text-align: end; margin-inline-start: auto; } .pager .next::after { content: "\00a0\2192"; }

.get { text-align: center; margin: 0 0 2rem; }
.button { display: inline-block; font-family: var(--head); font-size: 1.2rem; padding: 0.55rem 1.6rem; border-radius: 0.4rem; text-decoration: none; background: var(--ink); color: #f1e7c9; border: 1px solid var(--gilt); }
.button:hover { background: #2a3552; color: #fff; }
.button.off { background: transparent; color: var(--ink-soft); border: 1px dashed var(--gilt-soft); }

.foot { padding-block: 0 2.4rem; font: 0.9rem var(--head); color: var(--gilt-soft); text-align: center; }
.foot a { color: var(--gilt); text-decoration: none; } .foot a:hover { color: #e6c36f; }
.foot p { margin: 0; }
@media (max-width: 860px) {
  .docs-grid { grid-template-columns: 1fr; }
  .toc { position: static; max-height: 14rem; border-inline-end: 0; border-block-end: 1px solid var(--rule); }
}
@media (max-width: 560px) {
  body { font-size: 1.1rem; }
  .sections { gap: 1rem; }
  .leaf, .docs-grid { box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--gilt-soft); }
}

/* ---- the language menu, at the far right of the top bar ------------------------------------------- */
.langmenu { position: relative; font-family: var(--sans); }
.langmenu summary {
  list-style: none; cursor: pointer; font-size: 0.95rem; padding: 0.38rem 0.85rem; color: #e6dfc7;
  border: 1px solid var(--gilt-soft); border-radius: 0.35rem; background: rgba(255, 255, 255, 0.07); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.langmenu summary::-webkit-details-marker { display: none; }
.langmenu summary::after { content: ""; width: 0.45rem; height: 0.45rem; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translateY(-2px); }
.langmenu[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.langmenu summary:hover { border-color: var(--gilt); }
.langmenu ul { position: absolute; inset-inline-end: 0; top: calc(100% + 0.4rem); z-index: 30; margin: 0; padding: 0.3rem; list-style: none;
  min-width: 11rem; max-height: 70vh; overflow-y: auto; background: var(--paper-edge); border: 1px solid var(--gilt-soft); border-radius: 0.4rem;
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.6); }
.langmenu li { margin: 0; }
.langmenu a { display: block; padding: 0.45rem 0.7rem; color: var(--ink); text-decoration: none; border-radius: 0.25rem; font-size: 1rem; }
.langmenu a:hover, .langmenu a:focus-visible { background: #ddd9c6; color: var(--ink); }
.langmenu a[aria-current] { background: rgba(201, 162, 74, 0.28); }
.notice { text-align: center; font: 1.1rem var(--head); color: var(--partial); border: 1px solid var(--partial); border-radius: 0.4rem;
  background: rgba(154, 106, 18, 0.07); padding: 0.6rem 1rem; margin: 0 auto 1.8rem; max-width: 30rem; }
.center { text-align: center; }
.english { margin-top: 0.4rem; }