/*
 * Lyrania wiki theme (DokuWiki, "darkblue" template).
 *
 * The same engraved steel-and-brass look as the login page (css/lyr-ui.css):
 * cut-corner plates with a brushed-steel edge and brass corner brackets, plain Arial
 * headings and button labels, the brushed-metal background. Written as ONE
 * stylesheet for both places the wiki is seen:
 *
 *  - the standalone wiki (wiki.lyrania.co.uk): nothing sets any variable, so every
 *    value below falls back to the login-page look;
 *  - the in-game Wiki popup: popup-content/wiki-content.php injects this file into
 *    the iframe and content/js/wiki-theme.js sets --wk-* from the colours the
 *    player's current game theme actually renders, so the wiki keeps matching
 *    whichever theme/layout is selected. The shapes and type stay the same; only
 *    the colours (and the plain background instead of the image) follow the game.
 *
 * Not loaded by the game's own pages. The wiki's files are not in this repo, so the
 * standalone wiki loads this file through an nginx sub_filter (ops/scripts/
 * wiki-theme-nginx.sh); changing the look afterwards is a normal game deploy.
 */


html {
  /* surfaces and text */
  --w-bg: var(--wk-bg, #0a0b0d);
  --w-panel: var(--wk-panel, #14161a);
  --w-panel2: var(--wk-panel2, #1c1f24);
  --w-text: var(--wk-text, #ebe8e1);
  /* quiet text: the theme's own text colour, eased towards its panel, so it reads on light and dark alike */
  --w-muted: var(--wk-muted, color-mix(in srgb, var(--w-text) 62%, var(--w-panel)));
  --w-line: var(--wk-border, #363b42);
  /* accent: brass standalone, the game theme's link colour in-game */
  --w-accent: var(--wk-link, #d4a24c);
  --w-accent-hi: var(--wk-link, #f0cf8a);
  --w-accent-ink: #17110a;
  /* a solid colour in-game, the steel gradient standalone */
  --w-edge: var(--wk-border, linear-gradient(135deg, #cfd5db 0%, #8d949c 28%, #4b5057 52%, #8d949c 78%, #cfd5db 100%));
  --w-input-bg: var(--wk-input-bg, #08090b);
  --w-input-text: var(--wk-input-text, #ebe8e1);
  --w-input-border: var(--wk-input-border, #5a6068);
  --w-display: Arial, "Segoe UI", Helvetica, sans-serif;

  font-size: clamp(15px, 14px + 0.2vw, 18px);
  background: var(--w-bg);
  color-scheme: var(--wk-scheme, dark);
  scrollbar-color: #6a7078 var(--w-panel);
}

/* Background: brushed metal standalone, the game theme's plain colour in-game
 * (--wk-bg set => the image part of the fallback is not used). */
body::before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--wk-bg, #0a0b0d url("../images/main54/barrichrome_bg.jpg") center / cover no-repeat);
}

body::after {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
  /* standalone only: in-game the game's plain colour is used (a --wk-bg layer simply repeats it) */
  background: var(--wk-bg, radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.55) 100%));
}

html body {
  background: transparent;
  color: var(--w-text);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
}

html body #dokuwiki__site {
  max-width: min(1120px, 100%);
  margin: 0 auto;
  padding: 12px;
  background: transparent;
  color: var(--w-text);
}

html body #dokuwiki__top,
html body #dokuwiki__top .wrapper {
  background: transparent;
  color: var(--w-text);
}

/* ---- Plates --------------------------------------------------------------
 * The element paints the edge, ::before paints the fill and the two brass
 * brackets 1px inside it. (The ::after of these elements is DokuWiki's own
 * clearfix, so it is left alone.) */

html body #dokuwiki__header > .pad,
html body #dokuwiki__content > .pad,
html body #dokuwiki__content #dw__toc {
  --cut: 16px;
  --cut-in: calc(var(--cut) - 0.41px);
  position: relative;
  isolation: isolate;
  background: var(--w-edge);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}

html body #dokuwiki__header > .pad::before,
html body #dokuwiki__content > .pad::before {
  content: "";
  /* DokuWiki's clearfix makes these display:table, which would collapse the fill to nothing */
  display: block;
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  left: 1px;
  z-index: -1;
  background:
    linear-gradient(var(--w-accent), var(--w-accent)) right 6px top 6px / 18px 2px no-repeat,
    linear-gradient(var(--w-accent), var(--w-accent)) right 6px top 6px / 2px 18px no-repeat,
    linear-gradient(var(--w-accent), var(--w-accent)) left 6px bottom 6px / 18px 2px no-repeat,
    linear-gradient(var(--w-accent), var(--w-accent)) left 6px bottom 6px / 2px 18px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 38%),
    var(--w-panel);
  clip-path: polygon(var(--cut-in) 0, 100% 0, 100% calc(100% - var(--cut-in)), calc(100% - var(--cut-in)) 100%, 0 100%, 0 var(--cut-in));
}

/* ---- Header ----------------------------------------------------------- */

html body #dokuwiki__header {
  width: auto;
  margin: 0 0 10px;
  padding: 0;
}

html body #dokuwiki__header > .pad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 20px clamp(16px, 3vw, 30px);
}

html body #dokuwiki__header .headings,
html body #dokuwiki__header .tools {
  float: none;
  width: auto;
  margin: 0;
}

html body #dokuwiki__header .headings {
  flex: 0 1 auto;
}

html body #dokuwiki__header h1 {
  margin: 0;
  font-size: 1rem;
  line-height: 0;
}

html body #dokuwiki__header h1 a {
  display: inline-block;
}

html body #dokuwiki__header h1 img {
  float: none;
  display: block;
  width: auto;
  height: clamp(46px, 7vw, 68px);
  margin: 0;
  /* the wordmark is dark steel; lift it so it reads on the dark plate */
  filter: var(--wk-logo-filter, brightness(1.9) contrast(1.05));
}

html body #dokuwiki__header .tools {
  display: flex;
  flex: 1 1 340px;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  text-align: right;
}

html body #dokuwiki__header .tools ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

html body #dokuwiki__header .tools li {
  margin: 0;
  padding: 0;
  list-style: none;
}

html body #dokuwiki__usertools,
html body #dokuwiki__sitetools {
  /* the template pins the user tools to the page's top edge; they belong in the plate */
  position: static;
  top: auto;
  right: auto;
  left: auto;
  float: none;
  width: auto;
  margin: 0;
  text-align: right;
}

html body #dokuwiki__sitetools {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

/* The tool links are the same cut-corner buttons as the login page's. */
html body #dokuwiki__header .tools li a {
  --cut: 8px;
  --cut-in: calc(var(--cut) - 0.41px);
  --btn-fill: var(--w-panel2);
  --btn-edge: var(--w-edge);
  --btn-text: var(--w-text);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: var(--btn-edge);
  color: var(--btn-text);
  font-family: var(--w-display);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}

html body #dokuwiki__header .tools li a::before {
  content: "";
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  left: 1px;
  z-index: -1;
  background: var(--btn-fill);
  clip-path: polygon(var(--cut-in) 0, 100% 0, 100% calc(100% - var(--cut-in)), calc(100% - var(--cut-in)) 100%, 0 100%, 0 var(--cut-in));
}

html body #dokuwiki__header .tools li a:hover,
html body #dokuwiki__header .tools li a:focus-visible {
  --btn-edge: linear-gradient(135deg, var(--w-accent-hi), var(--w-accent) 55%, var(--w-accent));
  --btn-fill: var(--w-panel);
  --btn-text: var(--w-accent-hi);
  outline: none;
}

html body #dokuwiki__header .tools li a:active {
  transform: translateY(1px);
}

html body #dokuwiki__header .tools li a svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Search */
html body #dokuwiki__sitetools form.search {
  position: relative;
  float: none;
  width: min(320px, 100%);
  margin: 0;
  font-size: 1rem;
}

html body #dokuwiki__sitetools form.search > div.no {
  display: flex;
  align-items: stretch;
}

html body #dokuwiki__sitetools form.search input.edit {
  box-sizing: border-box;
  flex: 1 1 auto;
  width: auto !important;
  height: auto;
  margin: 0;
  padding: 8px 12px;
  line-height: 1.4;
  background: var(--w-input-bg);
  color: var(--w-input-text);
  border: 1px solid var(--w-input-border);
  border-radius: 2px;
  font-size: 0.95rem;
}

html body #dokuwiki__sitetools form.search input.edit:focus {
  border-color: var(--w-accent);
  box-shadow: 0 0 0 2px rgba(212, 162, 76, 0.28);
  outline: none;
}

html body #dokuwiki__sitetools form.search button {
  position: static;
  float: none;
  width: auto;
  height: auto;
  text-indent: 0;
  margin: 0 0 0 -1px;
  padding: 0 14px;
  background: var(--w-panel2);
  color: var(--w-text);
  border: 1px solid var(--w-input-border);
  border-radius: 2px;
  font-size: 0;
  cursor: pointer;
}

html body #dokuwiki__sitetools form.search button::before {
  content: "\2315";
  font-size: 1.1rem;
}

html body #dokuwiki__sitetools form.search button:hover {
  border-color: var(--w-accent);
  color: var(--w-accent-hi);
}

/* The template's quick-jump <select> is only for small screens. */
html body #dokuwiki__sitetools .mobileTools {
  display: none;
}

/* Breadcrumbs: a quiet line along the bottom of the header plate. */
html body #dokuwiki__header .breadcrumbs {
  flex: 1 1 100%;
  margin: 0;
  padding: 10px 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--w-line);
  color: var(--w-muted);
  font-size: 0.85rem;
}

html body #dokuwiki__header .breadcrumbs div {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--w-muted);
}

html body #dokuwiki__header .breadcrumbs .bchead {
  color: var(--w-muted);
}

/* Skip-to-content link: off-screen until a keyboard user focuses it. */
html body #dokuwiki__top ul.a11y.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

html body #dokuwiki__top ul.a11y.skip:focus-within {
  left: 12px;
  top: 12px;
  width: auto;
  height: auto;
  padding: 6px 12px;
  background: var(--w-panel);
  border: 1px solid var(--w-accent);
  overflow: visible;
  z-index: 10;
}

/* ---- Content ----------------------------------------------------------- */

html body #dokuwiki__content {
  float: none;
  width: auto;
  margin: 0 0 10px;
  padding: 0;
  background: transparent;
}

html body #dokuwiki__content > .pad {
  margin: 0;
  padding: clamp(18px, 3vw, 34px);
  background-clip: border-box;
}

html body #dokuwiki__content .page {
  /* the template draws its own bordered, shadowed box here; the plate is the box now */
  display: flow-root;
  padding: 0;
  margin: 0;
  background: transparent;
  color: var(--w-text);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

/* The page-id tab above the page is redundant with the breadcrumbs. */
html body #dokuwiki__content .pageId {
  display: none;
}

html body #dokuwiki__content .docInfo {
  margin: 28px 0 0;
  padding: 10px 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--w-line);
  color: var(--w-muted);
  font-size: 0.8rem;
}

/* Page tools (source / revisions / backlinks / top): a row of small buttons under the
 * page. The template floats them fixed at the page edge and hides the labels, so these
 * selectors repeat its own shape (div.tools ul li a) to win. */
html body #dokuwiki__pagetools {
  position: static;
  float: none;
  right: auto;
  left: auto;
  top: auto;
  width: auto;
  margin: 0 0 10px;
  padding: 0;
  background: transparent;
}

html body #dokuwiki__pagetools div.tools {
  position: static;
  width: auto;
  margin: 0;
  padding: 0;
  background: transparent;
}

html body #dokuwiki__pagetools div.tools ul,
html body #dokuwiki__pagetools:hover div.tools ul {
  position: static;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  list-style: none;
}

html body #dokuwiki__pagetools div.tools ul li {
  margin: 0;
  padding: 0;
  background: transparent;
  font-size: 1rem;
  list-style: none;
}

html body #dokuwiki__pagetools div.tools ul li a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: auto;
  padding: 7px 14px;
  background: var(--w-panel);
  color: var(--w-muted);
  border: 1px solid var(--w-line);
  border-radius: 2px;
  font-family: var(--w-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
}

html body #dokuwiki__pagetools div.tools ul li a span,
html body #dokuwiki__pagetools:hover div.tools ul li a span {
  display: inline;
  margin: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  white-space: nowrap;
}

html body #dokuwiki__pagetools div.tools ul li a svg {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 0;
  fill: currentColor;
}

html body #dokuwiki__pagetools div.tools ul li a:hover,
html body #dokuwiki__pagetools div.tools ul li a:focus-visible {
  background: var(--w-panel2);
  color: var(--w-accent-hi);
  border-color: var(--w-accent);
}

html body #dokuwiki__pagetools div.tools ul li a:hover svg,
html body #dokuwiki__pagetools div.tools ul li a:focus-visible svg {
  fill: currentColor;
}

/* ---- Text -------------------------------------------------------------- */

html body #dokuwiki__top a,
html body #dokuwiki__top a:link,
html body #dokuwiki__top a:visited,
html body #dokuwiki__top a.wikilink1,
html body #dokuwiki__top a.wikilink2,
html body #dokuwiki__top a.urlextern,
html body #dokuwiki__top a.interwiki,
html body #dokuwiki__top a.media {
  color: var(--w-accent);
}

html body #dokuwiki__top a:hover,
html body #dokuwiki__top a:focus {
  color: var(--w-accent-hi);
  text-decoration: underline;
}

html body #dokuwiki__top a.wikilink2 {
  opacity: 0.75;
}

html body #dokuwiki__content .page h1,
html body #dokuwiki__content .page h2,
html body #dokuwiki__content .page h3,
html body #dokuwiki__content .page h4,
html body #dokuwiki__content .page h5,
html body #dokuwiki__content .page h6 {
  margin: 1.6em 0 0.6em;
  padding: 0 0 0.3em;
  background: transparent;
  color: var(--w-text);
  font-family: var(--w-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-transform: uppercase;
}

html body #dokuwiki__content .page h1:first-child,
html body #dokuwiki__content .page h2:first-child {
  margin-top: 0;
}

html body #dokuwiki__content .page h1 {
  color: var(--w-accent-hi);
  font-size: clamp(1.35rem, 3.5vw, 1.8rem);
}

html body #dokuwiki__content .page h1,
html body #dokuwiki__content .page h2 {
  border-width: 0 0 1px;
  border-style: solid;
  /* a rule in the accent colour that fades out */
  border-image: linear-gradient(90deg, var(--w-accent), transparent) 1;
}

html body #dokuwiki__content .page h2 {
  font-size: clamp(1.15rem, 3vw, 1.45rem);
}

html body #dokuwiki__content .page h3 {
  border: 0;
  color: var(--w-accent-hi);
  font-size: clamp(1.02rem, 2.6vw, 1.2rem);
}

html body #dokuwiki__content .page h4,
html body #dokuwiki__content .page h5,
html body #dokuwiki__content .page h6 {
  border: 0;
  font-size: 1rem;
}

html body #dokuwiki__content .page p,
html body #dokuwiki__content .page li,
html body #dokuwiki__content .page td,
html body #dokuwiki__content .page th {
  overflow-wrap: break-word;
}

html body #dokuwiki__content .page img {
  max-width: 100%;
  height: auto;
}

html body #dokuwiki__content .page hr {
  height: 1px;
  margin: 1.6em 0;
  background: var(--w-line);
  border: 0;
}

html body #dokuwiki__content .page blockquote {
  margin: 1em 0;
  padding: 0.4em 1em;
  background: var(--w-panel2);
  border: 0;
  border-left: 3px solid var(--w-accent);
  color: var(--w-text);
}

html body #dokuwiki__content .page pre,
html body #dokuwiki__content .page code {
  background: var(--w-input-bg);
  color: var(--w-input-text);
  border: 1px solid var(--w-line);
  border-radius: 2px;
}

html body #dokuwiki__content .page pre {
  overflow: auto;
  padding: 0.8em 1em;
  border-left: 3px solid var(--w-accent);
}

html body #dokuwiki__content .page code {
  padding: 0.1em 0.35em;
}

html body #dokuwiki__content .page pre code {
  padding: 0;
  border: 0;
}

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

html body #dokuwiki__content #dw__toc {
  --cut: 10px;
  --cut-in: calc(var(--cut) - 0.41px);
  float: right;
  width: auto;
  min-width: 13em;
  max-width: 100%;
  margin: 0 0 1em 1.5em;
  padding: 1px;
  border: 0;
  color: var(--w-text);
}

html body #dokuwiki__content #dw__toc::before {
  content: "";
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  left: 1px;
  z-index: -1;
  background: var(--w-panel2);
  clip-path: polygon(var(--cut-in) 0, 100% 0, 100% calc(100% - var(--cut-in)), calc(100% - var(--cut-in)) 100%, 0 100%, 0 var(--cut-in));
}

html body #dokuwiki__content #dw__toc h3 {
  margin: 0;
  padding: 10px 16px 6px;
  background: transparent;
  border: 0;
  color: var(--w-accent-hi);
  font-family: var(--w-display);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

html body #dokuwiki__content #dw__toc > div {
  padding: 0 16px 10px;
  background: transparent;
  border: 0;
}

html body #dokuwiki__content #dw__toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

html body #dokuwiki__content #dw__toc li {
  margin: 0;
  padding: 1px 0;
  font-size: 0.9rem;
  line-height: 1.5;
  list-style: none;
}

html body #dokuwiki__content #dw__toc li ul {
  padding: 0 0 0 1em;
}

html body #dokuwiki__content #dw__toc a {
  color: var(--w-text);
}

html body #dokuwiki__content #dw__toc a:hover {
  color: var(--w-accent-hi);
}

/* ---- Tables ------------------------------------------------------------- */

html body #dokuwiki__content .page div.table {
  max-width: 100%;
  margin: 1em 0;
  overflow-x: auto;
}

html body #dokuwiki__content .page table.inline {
  width: auto;
  min-width: 50%;
  max-width: 100%;
  margin: 0;
  border-collapse: collapse;
  background: transparent;
  color: var(--w-text);
}

html body #dokuwiki__content .page table.inline th,
html body #dokuwiki__content .page table.inline td {
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--w-line);
  color: var(--w-text);
  vertical-align: top;
}

html body #dokuwiki__content .page table.inline th {
  background: var(--w-panel2);
  font-family: var(--w-display);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

html body #dokuwiki__content .page table.inline tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.025);
}

/* ---- Forms, buttons and messages (edit, login, search, admin) ------------ */

html body #dokuwiki__top input.edit,
html body #dokuwiki__top input[type="text"],
html body #dokuwiki__top input[type="password"],
html body #dokuwiki__top input[type="email"],
html body #dokuwiki__top input[type="search"],
html body #dokuwiki__top textarea,
html body #dokuwiki__top select {
  background: var(--w-input-bg);
  color: var(--w-input-text);
  border: 1px solid var(--w-input-border);
  border-radius: 2px;
}

html body #dokuwiki__top input:focus,
html body #dokuwiki__top textarea:focus,
html body #dokuwiki__top select:focus {
  border-color: var(--w-accent);
  box-shadow: 0 0 0 2px rgba(212, 162, 76, 0.28);
  outline: none;
}

html body #dokuwiki__top input::placeholder,
html body #dokuwiki__top textarea::placeholder {
  color: var(--w-muted);
  opacity: 1;
}

html body #dokuwiki__top input.button,
html body #dokuwiki__top button.button,
html body #dokuwiki__top input[type="submit"],
html body #dokuwiki__top input[type="button"],
html body #dokuwiki__top button:not(.pickerbutton) {
  padding: 8px 18px;
  background: var(--w-panel2);
  color: var(--w-text);
  border: 1px solid var(--w-input-border);
  border-radius: 2px;
  font-family: var(--w-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
}

html body #dokuwiki__top input.button:hover,
html body #dokuwiki__top input[type="submit"]:hover,
html body #dokuwiki__top button:hover {
  background: var(--w-panel);
  color: var(--w-accent-hi);
  border-color: var(--w-accent);
}

html body #dokuwiki__top div.error,
html body #dokuwiki__top div.info,
html body #dokuwiki__top div.success,
html body #dokuwiki__top div.notify {
  margin: 1em 0;
  padding: 10px 14px;
  background: var(--w-panel2);
  border: 0;
  border-left: 3px solid var(--w-line);
  color: var(--w-text);
}

html body #dokuwiki__top div.error {
  border-left-color: #c65a4a;
}

html body #dokuwiki__top div.success {
  border-left-color: #6aa26a;
}

html body #dokuwiki__top div.notify {
  border-left-color: var(--w-accent);
}

/* Search results, sitemap and recent changes read on the plate like the rest. */
html body #dokuwiki__top dl.search_results dt,
html body #dokuwiki__top .search_fulltextresult {
  color: var(--w-text);
}

html body #dokuwiki__top .search_snippet {
  color: var(--w-muted);
}

html body #dokuwiki__top ul.idx li,
html body #dokuwiki__top div.level1,
html body #dokuwiki__top div.level2 {
  color: var(--w-text);
}

/* Live search dropdown. */
html body #dokuwiki__top div.ajax_qsearch,
html body #dokuwiki__top div.JSpopup {
  background: var(--w-panel);
  color: var(--w-text);
  border: 1px solid var(--w-input-border);
  border-radius: 2px;
}

html body #dokuwiki__top .ajax_qsearch li:hover,
html body #dokuwiki__top .ajax_qsearch a:hover {
  background: var(--w-panel2);
}

/* ---- Small screens ------------------------------------------------------- */

@media (max-width: 760px) {
  html body #dokuwiki__header > .pad {
    flex-direction: column;
    align-items: flex-start;
  }

  html body #dokuwiki__header .tools,
  html body #dokuwiki__sitetools {
    width: 100%;
    flex: 1 1 auto;
    align-items: flex-start;
  }

  html body #dokuwiki__header .tools ul {
    justify-content: flex-start;
  }

  html body #dokuwiki__sitetools form.search input.edit {
    width: 100%;
  }

  html body #dokuwiki__sitetools form.search {
    width: 100%;
  }

  html body #dokuwiki__content #dw__toc {
    float: none;
    margin: 0 0 1em;
  }

  html body #dokuwiki__pagetools ul {
    justify-content: flex-start;
  }
}

@media print {
  body::before,
  body::after,
  html body #dokuwiki__pagetools {
    display: none;
  }

  html body #dokuwiki__header > .pad,
  html body #dokuwiki__content > .pad {
    background: none;
    clip-path: none;
  }

  html body #dokuwiki__header > .pad::before,
  html body #dokuwiki__content > .pad::before {
    display: none;
  }

  html body {
    color: #000;
  }
}