/** Variables **/

:root {
    /* Sizes */
    --sidebar-width: 26em;
    --sidebar-margin: 3em;

    --text-width: 800px;

    /* Colors */
    --canvas-bg: #fff;
    --canvas-color: #000;
    --pre-bg-color: #f9f9f9;
    --pre-color: #000;
    --border-color: #aaa;
    --link-color: #09f;
    --command-color: green;

    /* Syntax highlighting color, based on the KWrite theme
       generated by highlight 3.52 (http://www.andre-simon.de/) */
    --highlight-num: #b07e00;
    --highlight-esc: #ff00ff;
    --highlight-str: #bf0303;
    --highlight-pps: #818100;
    --highlight-slc: #4c4b4b;
    --highlight-com: #4c4b4b;
    --highlight-ppc: #008200;
    --highlight-opt: #000000;
    --highlight-ipl: #0057ae;
    --highlight-lin: #555555;
    --highlight-kwa: #000000;
    --highlight-kwb: #0057ae;
    --highlight-kwc: #000000;
    --highlight-kwd: #010181;
}

/** Fixups */

/* Avoid elements wider than screen */
img {
  display: inline-block;
  max-width: 100%;
}

pre, code, sample {
  white-space: pre-wrap;
  hyphens: none;
}

table {
  max-width: 100%;
}


/* Common styles */

main
{
  max-width: var(--text-width);
  margin: auto;
}

#copyright
{
  text-align: center;
  margin-top: 10px;
}

/* Visual styles */

/* Underlined "link here" #/→ symbols next to headings look quite odd, don't they? */
a.here { text-decoration: none; }


/* Make it clear that the expand/collapse triangle symbol is clickable */
summary { cursor: pointer; }

hr
{
  height: 1px;
  background-color: var(--border-color);
  border: 0 none;
  margin: 0;
}

a { color: var(--link-color); }

a.footnote { text-decoration: none; }

pre
{
  background-color: var(--pre-bg-color);
  padding: 10px;
  border: 1px solid var(--border-color);
}

code, kbd {
  color: var(--command-color);
}

/* ToC hardly needs list bullets. */
ul.toc { list-style: none; }
ul.toc li { margin-top: 0.5em; }

/* Typography */

body
{
    font-family: system-ui, sans-serif;
    color: var(--canvas-bg-color);
}

#book-title { font-weight: bold; font-size: 200%; }

#dedication
{
    text-align: right;
    font-style: italic;
    width: 100%;
}

/* For some reason on most system the default monospace font looks smaller.
   This brings them back to normal. */
pre, code, kbd { font-family: monospace, monospace; }

@supports (hyphens: auto) {
  main {
    text-align: justify;
    hyphens: auto;
  }
}

pre, code, sample {
  white-space: pre-wrap;
  hyphens: none;
}

/* Use a side pane ToC on screens that are wider than they are tall. */

@media (pointer: fine), (orientation: landscape) {
  div#chapters-index {
    width: var(--sidebar-width);
    overflow: scroll;

    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;

    padding-right: 1em;
  }

  main {
    /* Margin wider than the sidebar is intentional,
       so that there's always some space between the sidebar and the content block.
     */
    margin-left: calc(var(--sidebar-width) + var(--sidebar-margin));
  }
}

/** Syntax highlighting */
.hl.num { color: var(--highlight-num); }
.hl.esc { color: var(--highlight-esc); }
.hl.str { color: var(--highlight-str); }
.hl.pps { color: var(--highlight-pps); }
.hl.slc { color: var(--highlight-slc); font-style: italic; }
.hl.com { color: var(--highlight-com); font-style: italic; }
.hl.ppc { color: var(--highlight-ppc); }
.hl.opt { color: var(--highlight-opt); }
.hl.ipl { color: var(--highlight-ipl); }
.hl.lin { color: var(--highlight-lin); }
.hl.kwa { color: var(--highlight-kwa); font-weight: bold; }
.hl.kwb { color: var(--highlight-kwb); }
.hl.kwc { color: var(--highlight-kwc); font-weight: bold; }
.hl.kwd { color: var(--highlight-kwd); }