/*-*- css-indent-offset: 2 -*-*/

/* Mini reset. */
html { box-sizing: border-box; }
*, :before, :after { box-sizing: inherit; padding: 0; margin: 0; }

/* Other. */
body { margin: 1em; line-height: 1.75; }
html {
  --pass: #41b941aa;
  --fail: #ff4444aa;
  --none: #7d7d7d99;
  --back: #fff;
  --fore: #000;
  --normal-pass: linear-gradient(var(--pass), var(--pass)), var(--back);
  --normal-fail: linear-gradient(var(--fail), var(--fail)), var(--back);
  --bright-pass: linear-gradient(#fff3, #fff3), linear-gradient(var(--pass), var(--pass)), var(--back);
  --bright-fail: linear-gradient(#fff3, #fff3), linear-gradient(var(--fail), var(--fail)), var(--back);
  @media(prefers-color-scheme:light){&:has(#invertmode:checked)      { --fore: #ddd; --back: #000 } }
  @media(prefers-color-scheme:dark) {&:has(#invertmode:not(:checked)){ --fore: #ddd; --back: #000 } }
  transition: background-color .1s ease-in, color .1s ease-in;
  color: var(--fore);
  background: var(--back);
  --indent: 1.5em;
  --border-width: 2px;
}
input[type="checkbox"] {
  opacity: .5;
  transition: opacity ease-in-out .1s;
  &:hover { opacity: 1 }
  --unit: 25px;
  --right-distance: calc(100% - var(--unit));
  --on-distance: var(--right-distance);
  --off-distance: 0;
  @media (prefers-color-scheme: dark) {
    --on-distance: 0;
    --off-distance: var(--right-distance);
  }
  &:before, &:after { /* groove + knob */
    content: '';
    display: block;
    position: absolute; inset: 0;
    border-radius: var(--unit);
    transition: left .05s ease-in;
  }
  &:before { /* groove */
    background: #999;
    box-shadow: inset 0 0 0 1px #0002;
  }
  &:after { /* knob */
    width: var(--unit);
    background: #fff; box-shadow: 0 1px 2px 0 #0008;
    left: var(--off-distance)
  }
  &:checked:after { left: var(--on-distance) }
  appearance: none;
  display: inline-block; height: var(--unit); width: calc(var(--unit) * 1.75);
  position: relative; vertical-align: middle; bottom: .1em;
  cursor: pointer;
  font-size: inherit;
  &#invertmode {
    position: fixed; top: 0; right: 0; margin: 1rem;
    --sun: url('data:image/svg+xml,<svg width="25" height="25" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="3.5"/><path d="M10 2.5V5m0 10v2.5m5.3-12.8-1.8 1.8m-7 7-1.8 1.8M17.5 10H15M5 10H2.5m2.2-5.3 1.8 1.8m7 7 1.8 1.8" stroke="%23000" stroke-width="1.5px"/></svg>');
    --moon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 20 20"><path d="M10 3a7 7 0 0 0-7 7 7 7 0 0 0 7 7 7 7 0 0 0 5.77-3.05A6 6 0 0 1 15 14a6 6 0 0 1-6-6 6 6 0 0 1 2.48-4.84A7 7 0 0 0 10 3z"/></svg>');
    /* knob */
    &:after { content: var(--sun) }
    &:checked:after { content: var(--moon) }
    @media (prefers-color-scheme: dark) {
      &:after { content: var(--moon) }
      &:checked:after { content: var(--sun) }
    }
  }
}
a { border-radius: 1px; color: #00d }
a:hover { background: #22f5; outline: 2px solid #22f5 }
:focus { outline-offset: 1px; outline: 2px solid #6668 }
a:active {}
code, tt, pre {
  border-radius: .25em;
  padding: .25em .25em .0625em;
  outline: 1px solid #0003;
  background: #aaa5;
  bottom: .125em;
}
blockquote, pre { margin: 1.5em; padding: .5em 1em; }
blockquote {
  border-left: .5em solid #0003;
  padding-left: .5em;
  background: #0001;
  outline: 0;
  & > :first-child { margin-top: 0 }
  & > :last-child { margin-bottom: 0 }
}
details, .error, .legend {
  line-height: 1.5;
  border-radius: .25em;
  margin: 2px 0;
  padding: .125em .25em;
  border: 1px solid #888a;
}
details.group tt.multi { display: inline-block; vertical-align: middle; line-height: .9; }
details.group.skip, .legend.skip { background: var(--none); }
details.group.pass, .legend.pass { background: var(--normal-pass); }
details.test.pass                { background: var(--bright-pass); }
details.group.fail, .legend.fail { background: var(--normal-fail); }
details.test.fail,  .error       { background: var(--bright-fail); }
details.group.skip, .legend.skip,
details.group.pass, .legend.pass,
details.test.pass,
details.group.fail, .legend.fail,
details.test.fail,  .error {
  color: #000;
  border: 1px solid #0008;
  code, tt, pre {
    background: #0001;
    outline: 1px solid #0003;
    & div.comment {
      & * { background: #00000018 }
      color: #0006;
    }
  }
}
details.skip > summary { text-decoration-line: line-through; }
.group {
  padding-left: 1em;
}
.group > summary {
  font-weight: bold;
  margin-left: -.75em;
}
.group div.count { float: right; }
div.count > span.pass, div.count > span.fail, div.count > span.skip {
  width: 1.5em;
  display: inline-block;
  text-align: right;
  color: #444;
}
div.count > span.pass { color: #050; }
div.count > span.fail { color: #600; }
textarea { width: 100%; overflow: visible; height: fit-content; background: #0000;}
summary { cursor: pointer; }
hr { margin: 2em; }
table {
  border-spacing: .125em;
}
td, th {
  vertical-align: baseline;
  font-family: sans;
}
tbody th { text-align: right; }
td {
  border-radius: .25em;
  background: #0002;
  font-weight: normal;
  text-align: left;
  padding: .125em .25em .1875em;
}
.docs table {
  margin: 1.5em;
  border-collapse: collapse;
}
.docs td, .docs th {
  border: var(--border-width) solid #8888;
  padding: .125em .5em;
  background: #0000;
  text-align: revert-layer !important;
}
li { margin-left: 1em; }
p, h1, h2, footer { margin: 1em 0 .5em; }
footer { text-align: center; }
.fixme, .note, .skipnote { background: #ff0a; font-weight: bold; border-radius: .25em; }
h1, h2, h3, h4, h5, h6 {
  & a {
    color: inherit;
    text-decoration: none;
    text-decoration-thickness: 2px;
  }
  & a:hover { text-decoration: underline }
  & a[href^="#"]:hover:after {
    display: inline-block;
    content: " #";
    color: #666;
    width: 0em;
    text-decoration: none;
  }
  font-family: sans;
}
.nowrap { white-space: nowrap }

/**** Style for table-of-contents. ****/
ul.toc, .toc ul {
  list-style: none;
  margin: 0;
  & a {
    color: inherit;
    text-decoration: none;
    &:hover { text-decoration: underline }
  }
  & li {
    position: relative;
    margin: 0 0 0 var(--indent);
    vertical-align: top;
    &:before, &:after {
      position: absolute;
      height: .8em; width: 1em; top: 0; left: -1.2em;
      content: '';
      border: solid #8888;
      border-width: 0 0 var(--border-width) var(--border-width);
      border-radius: 0 0 0 1em;
    }
    &:last-child:before { content: unset }
    &:before {
      border-bottom-left-radius: 0;
      height: 100%; border-bottom-width: 0;
    }
  }
}

/*[eof]*/