/**
 * The version furniture.
 *
 * The sidebar and the notice reuse the classes the theme already styles
 * (.manual-nav, .mver, .manual-carried), so themed documentation stays themed. Only
 * what is new here is styled here, and it reads the theme's custom properties
 * with a fallback, so the plugin also looks reasonable on a theme that has
 * never heard of it.
 */

.manual-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  vertical-align: middle;
  color: var(--o1, #c8912a);
  background: color-mix(in srgb, var(--o1, #c8912a) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--o1, #c8912a) 35%, transparent);
}

/* The notice block can stack more than one line; they should read as a set. */
.manual-notices { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.manual-notices .manual-carried { margin-bottom: 0; }

/* Unreleased work is the one state that must never be mistaken for the live
   manual, so it is the one that does not borrow the accent colour. */
.manual-carried-draft {
  border-left-color: #4a9e57;
  background: color-mix(in srgb, #4a9e57 10%, transparent);
}

.manual-carried-unknown {
  border-left-color: #c0504a;
  background: color-mix(in srgb, #c0504a 10%, transparent);
}

.manual-carried a { color: inherit; }
.manual-carried a:hover { color: var(--fg, #fff); }

/* "This chapter is not part of version 1.0" — a real answer to a real
   question, so it gets the room a page gets rather than the room a warning
   gets. */
.manual-missing {
  padding: 22px 24px;
  border: 1px solid var(--line, rgba(255, 255, 255, .12));
  border-radius: 10px;
  background: var(--glass, rgba(255, 255, 255, .03));
}
.manual-missing p { margin: 0 0 10px; }
.manual-missing p:last-child { margin-bottom: 0; }

/* The contents list on the front page of the documentation. */
.manual-index { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.manual-index > li { padding: 10px 0; border-bottom: 1px solid var(--line, rgba(255, 255, 255, .1)); }
.manual-index > li:last-child { border-bottom: 0; }
.manual-index a { text-decoration: none; font-weight: 600; }
.manual-index-sum {
  display: block;
  margin-top: 3px;
  font-size: 13.5px;
  color: var(--muted, #9aa7b4);
}
.manual-index-lvl-1 { padding-left: 20px; }
.manual-index-lvl-2 { padding-left: 40px; }
.manual-index-lvl-3 { padding-left: 60px; }

/* The picker's own line for unreleased work, so it does not read as a version
   number among version numbers. */
.mver-menu .mver-next { font-style: italic; opacity: .85; }

/* ============================================================
   THE CONTENTS TREE
   ============================================================
   The theme styles .manual-nav a and the current item; this only adds the
   nesting, the fold and the headings within a chapter.

   Indentation is per level and comes from the nesting, so the old flat
   manual-lvl-* padding is deliberately overruled: with real nesting it would
   be applied twice. */
.manual-tree ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.manual-tree ul ul { margin-left: 11px; padding-left: 7px; border-left: 1px solid var(--line, rgba(255, 255, 255, .1)); }
.manual-nav .manual-tree .manual-lvl-1 > .manual-row > a,
.manual-nav .manual-tree .manual-lvl-2 > .manual-row > a,
.manual-nav .manual-tree .manual-lvl-3 > .manual-row > a { padding-left: 10px; }

/* The link and its fold button sit on one line, and the current-item highlight
   has to cover the whole line rather than just the words. */
.manual-row { display: flex; align-items: stretch; gap: 2px; border-radius: 7px; }
.manual-row > a { flex: 1 1 auto; min-width: 0; }

.manual-tree .current_page_item > .manual-row,
.manual-tree .current_page_ancestor > .manual-row { background: color-mix(in srgb, var(--o1, #c8912a) 13%, transparent); box-shadow: inset 2px 0 0 var(--o1, #c8912a); }
.manual-tree .current_page_item > .manual-row > a,
.manual-tree .current_page_ancestor > .manual-row > a { background: none; box-shadow: none; color: var(--fg, #fff); }

.manual-toggle {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 26px; padding: 0; margin: 0;
  border: 0; background: none; cursor: pointer;
  color: var(--dim, #7c8894);
  border-radius: 6px;
}
.manual-toggle:hover { color: var(--fg, #fff); background: rgba(255, 255, 255, .06); }
.manual-toggle:focus-visible { outline: 2px solid var(--o1, #c8912a); outline-offset: -2px; }
.manual-toggle .caret { font-size: 9px; transition: transform .18s ease; }
.is-open > .manual-row > .manual-toggle .caret { transform: rotate(180deg); }

/* Shut branches are hidden, not removed: with JavaScript off nothing sets
   is-shut back, so the server only ever shuts what the reader is not in. */
.manual-tree li.is-shut > ul { display: none; }

/* The headings of the chapter you are reading. Quieter than the chapters
   themselves — they are a way back into one page, not other pages. */
.manual-toc { margin-left: 11px; padding-left: 7px; border-left: 1px solid var(--line, rgba(255, 255, 255, .1)); }
.manual-toc a { font-size: 12.5px; color: var(--dim, #7c8894); padding-top: 4px; padding-bottom: 4px; }
.manual-toc a:hover { color: var(--fg, #fff); }
.manual-toc a[aria-current="true"] { color: var(--o1, #c8912a); }
.manual-toc-h3 > a { padding-left: 22px; }
.manual-toc-h4 > a { padding-left: 34px; }

/* A heading jumped to must not end up under the sticky header. */
.manual-body :is(h2, h3, h4)[id] { scroll-margin-top: 96px; }

/* ============================================================
   THE SIDEBAR ON A NARROW SCREEN
   ============================================================
   There it is not a sidebar at all: it lies above the chapter, and a whole
   contents between the reader and the first sentence is in the way. So it
   folds shut behind one button, in the same shape as the version picker
   right above it.

   1000 px is where this theme stops putting the sidebar beside the chapter.
   A theme that never did keeps the button too, which is no loss: a contents
   above a chapter reads the same everywhere. */
.manual-open {
  display: none;
  width: 100%;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line, rgba(255, 255, 255, .12));
  border-radius: 8px;
  background: var(--glass, rgba(255, 255, 255, .03));
  font: inherit;
  font-size: 13px;
  text-align: left;
  color: var(--muted, #9aa7b4);
  cursor: pointer;
  transition: border-color .16s, color .16s;
}
.manual-open:hover { color: var(--fg, #fff); border-color: color-mix(in srgb, var(--o1, #c8912a) 45%, transparent); }
.manual-open:focus-visible { outline: 2px solid var(--o1, #c8912a); outline-offset: 2px; }
.manual-open .caret { margin-left: auto; font-size: 9px; opacity: .7; transition: transform .18s ease; }
.manual-nav.is-open .manual-open .caret { transform: rotate(180deg); }

@media (max-width: 1000px) {
  /* A nested tree of rows side by side would be unreadable; the nesting keeps
     its indentation but stacks. */
  .manual-tree ul { flex-direction: column; }
  .manual-tree ul ul { margin-left: 8px; }

  /* .has-open is set by manual.js. Without it nothing here applies, so with
     JavaScript off the heading stays a heading and the list stays open. */
  .manual-nav.has-open .manual-open { display: flex; }
  .manual-nav.has-open .eyebrow { display: none; }
  .manual-nav.has-open:not(.is-open) .manual-tree { display: none; }
  .manual-nav.has-open.is-open .manual-tree { margin-top: 10px; }
}

/* ---------------------------------------------------------------------------
   HET LEESBLOK

   De tekst lag plat op de achtergrond. Hier komt een vlak onder, over de volle
   breedte van de leeskolom, zodat een hoofdstuk als een blad op de pagina ligt.

   WAAROM HIER GEEN var(--glass) STAAT. Dat is de glaskleur van het thema en die
   is rgba(255,255,255,.045) -- 4,5% wit. Prima voor een chip van twee regels,
   onzichtbaar over een vlak van een halve pagina. Vandaar een eigen waarde.

   EN WAAROM backdrop-filter HIER NIET HET WERK DOET. De achtergrond van de site
   is een effen #070d16, en een blur over een effen kleur geeft exact diezelfde
   kleur terug. Het glaseffect moet dus uit het vlak zelf komen: een lichte
   laag, een verloop zodat het geen dood rechthoek is, en een oplichtende
   bovenrand. De blur blijft staan voor waar er wél iets achter langs loopt
   (een verloop in de header, een afbeelding), maar er wordt niet op geleund.

   Op .manual-body en niet op de content alleen: dan staat de titel op hetzelfde
   blad in plaats van erboven te zweven.
   ------------------------------------------------------------------------- */
.up-manual .manual-body {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .028) 340px),
    rgba(255, 255, 255, .035);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  backdrop-filter: blur(16px) saturate(125%);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 18px;
  padding: clamp(22px, 4vw, 46px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    0 22px 60px rgba(0, 0, 0, .30);
}

/* De titel staat in .sec-head bovenin dat blad; de marge die hem van de
   paginarand af hield hoort daar niet meer. */
.up-manual .manual-body > .sec-head { margin-top: 0; }
.up-manual .manual-body > *:first-child { margin-top: 0; }

/* Op een licht thema is wit-op-wit geen blad maar een onzichtbaar vlak. */
@media (prefers-color-scheme: light) {
  .up-manual .manual-body {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .78) 340px),
      rgba(255, 255, 255, .70);
    border-color: rgba(0, 0, 0, .09);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .9),
      0 22px 60px rgba(0, 0, 0, .10);
  }
}

/* Op een smal scherm mag het blad tot de rand lopen: een kaart met 16px lucht
   eromheen maakt de leeskolom daar onnodig smal. */
@media (max-width: 640px) {
  .up-manual .manual-body {
    border-radius: 12px;
    padding: 18px 16px;
  }
}
/* ---------------------------------------------------------------------------
   VORIGE / VOLGENDE

   Twee vlakken onderaan het hoofdstuk. Ze staan altijd allebei op hun eigen
   kant, ook als er maar een van de twee is -- vandaar de lege span in de HTML.
   Zonder dat schuift "Volgende" bij het eerste hoofdstuk naar links en lijkt
   het "Vorige".
   ------------------------------------------------------------------------- */
.upm-prevnext {
  display: flex; gap: 14px; margin: 2.6em 0 .4em;
  border-top: 1px solid var(--line, rgba(255, 255, 255, .10));
  padding-top: 1.6em;
}
.upm-prevnext .upm-pn { flex: 1 1 0; min-width: 0; }
.upm-pn:not(.upm-pn-empty) {
  display: flex; flex-direction: column; gap: 3px;
  text-decoration: none; padding: 12px 16px; border-radius: 12px;
  background: var(--glass, rgba(255, 255, 255, .045));
  border: 1px solid var(--line, rgba(255, 255, 255, .10));
  color: inherit;
}
.upm-pn-next { text-align: right; }
.upm-pn-kind {
  font-size: 11px; text-transform: uppercase; letter-spacing: .7px;
  opacity: .6;
}
.upm-pn-title {
  font-weight: 600; line-height: 1.3;
  overflow-wrap: anywhere;
}
.upm-pn:not(.upm-pn-empty):hover {
  border-color: var(--o1, #3d9bd4);
}
.upm-pn:focus-visible { outline: 2px solid var(--o1, #3d9bd4); outline-offset: 3px; }

/* Op een smal scherm onder elkaar, en dan leest rechts uitlijnen niet meer. */
@media (max-width: 600px) {
  .upm-prevnext { flex-direction: column; }
  .upm-pn-next { text-align: left; }
  .upm-pn-empty { display: none; }
}

/* ---------------------------------------------------------------------------
   DE VERSIEHOEK

   Lees je een oudere versie, dan blijft dat meelopen in de hoek van het scherm.
   De versiekiezer in de zijbalk scrollt weg, en dan lees je een half uur in 1.0
   zonder dat er nog iets is dat je eraan herinnert.

   Alleen bij een NIET-huidige versie of bij ongepubliceerd werk: op de nieuwste
   versie zou het een balkje zijn dat altijd in beeld staat en nooit iets zegt.
   Die klassen zet UPM_Render op de body.
   ------------------------------------------------------------------------- */
.upm-corner { display: none; }
.up-manual-unreleased .upm-corner,
.up-manual-older .upm-corner {
  display: flex; align-items: center; gap: 10px;
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  padding: 9px 14px; border-radius: 999px;
  font-size: 12.5px; line-height: 1;
  background: rgba(13, 22, 32, .92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line, rgba(255, 255, 255, .14));
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.upm-corner-what { opacity: .75; }
.upm-corner-v { font-weight: 700; }
.upm-corner a {
  color: inherit; text-decoration: underline; text-underline-offset: 2px;
}
.up-manual-unreleased .upm-corner { border-color: #a06000; }

@media (max-width: 600px) {
  .up-manual-unreleased .upm-corner,
  .up-manual-older .upm-corner { left: 16px; right: 16px; justify-content: center; }
}

/* De scheidslijn van de zijbalk hoorde bij een leeskolom zonder eigen rand: hij
   markeerde waar de tekst begon. Nu het hoofdstuk op een blad met een eigen
   rand ligt, staat die lijn 48px daarvandaan in het niets. Alleen hier weg, niet
   in het thema -- op een pagina zonder blad doet hij nog gewoon zijn werk. */
.up-manual .manual-nav { border-right: 0; padding-right: 0; }

/* De kop boven de add-ons in de zijbalk. Een streep erboven, want dit is een
   andere lijn dan de handleiding erboven: die hoofdstukken horen bij hun eigen
   versienummer en niet bij de versie die je nu leest. */
.manual-nav .manual-mod-head {
  display: block;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--line, rgba(255, 255, 255, .12));
}

/* ---------------------------------------------------------------------------
   NIEUW IN DEZE VERSIE

   Een kader boven het hoofdstuk, niet een regeltje ertussen: dit gaat over de
   hele pagina die eronder staat, en een zin die meeloopt in de tekst leest als
   onderdeel van die tekst.

   De accentkleur zit op de linkerrand en niet op het vlak. Een gekleurd vlak
   boven elk gewijzigd hoofdstuk trekt de aandacht weg van waar het over gaat --
   en dat is de tekst eronder, niet de mededeling.
   ------------------------------------------------------------------------- */
.upm-changed {
  margin: 0 0 1.8em;
  padding: 14px 18px;
  border-radius: 10px;
  border: 1px solid var(--line, rgba(255, 255, 255, .12));
  border-left: 3px solid var(--o1, #3d9bd4);
  background: rgba(61, 155, 212, .07);
}
.upm-changed-kop {
  display: block;
  font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .8px;
  color: var(--o1, #3d9bd4);
}
.upm-changed-tekst { margin-top: .5em; }
.upm-changed-tekst > :first-child { margin-top: 0; }
.upm-changed-tekst > :last-child { margin-bottom: 0; }

/* Herschreven is rustiger dan nieuw: het hoofdstuk stond er al. */
.upm-changed-edit {
  border-left-color: var(--muted, #8b9aad);
  background: rgba(255, 255, 255, .035);
}
.upm-changed-edit .upm-changed-kop { color: var(--muted, #8b9aad); }