:root {
  --lh: 1.3rem;
  font-family: monospace;
  line-height: var(--lh);
  color-scheme: light dark;
}

* {
  font-size: unset;
  font-weight: unset;
  margin: unset;
  padding: unset;
}

body {
  margin: var(--lh) 2ch;
}

nav,
h2,
p,
ul,
form,
details,
summary {
  margin: var(--lh) 0;
}

li ul,
ul ul {
  margin: 0;
}

h2,
summary {
  text-decoration: underline;
}

h1 {
  width: fit-content;
  padding: calc((var(--lh) - 0.1em) / 2) calc(1ch + (1ch - 0.1em) / 2);
  margin: calc(var(--lh) + (var(--lh) - 0.1em) / 2) calc((1ch - 0.1em) / 2);
  border: 0.1em solid;
}

ul {
  padding-left: 2ch;
  list-style: "- ";
}

button,
input {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  border: none;
}

input[type="text"],
input[type="password"] {
  width: 28ch;
  background: none;
}

input[type="number"] {
  width: 14ch;
}

input[type="checkbox"] {
  appearance: none;
}

input[type="checkbox"]::before {
  content: "[ ]";
}

input[type="checkbox"]:checked::before {
  content: "[X]";
}

input[type="radio"] {
  appearance: none;
}

input[type="radio"]::before {
  content: "( )";
}

input[type="radio"]:checked::before {
  content: "(O)";
}

details {
  position: relative;
  padding-left: 2ch;
}

details::before {
  content: "";
  position: absolute;
  top: var(--lh);
  left: 0;
  width: 1;
  height: calc(100% - var(--lh));
  margin-left: calc((1ch - 0.1em) / 2);
  border-left: 0.1em solid;
}

summary {
  list-style: "> ";
}

details[open] > summary {
  list-style-type: "v ";
}

dl {
  display: grid;
  grid: auto-flow / repeat(2, max-content);
  column-gap: 1ch;
}

dl dt {
  grid-column: 1;
  justify-self: right;
  font-style: italic;
}

table {
  border-collapse: collapse;
}

th {
  font-weight: bold;
}

th + th,
td + td {
  padding-left: 2ch;
}

.user {
  font-weight: bold;
}

.none {
  font-style: italic;
}

@media (prefers-color-scheme: light) {
  button {
    background-color: #ddd;
  }

  button:hover {
    background-color: #bbb;
  }

  button:active {
    background-color: #999;
  }

  input {
    background-color: #ddd;
  }

  input[type="text"],
  input[type="password"] {
    box-shadow: 0 -0.1em 0 inset black;
  }

  tr:nth-child(even) {
    background-color: #ddd;
  }

  .error {
    background-color: #faa;
  }

  .none {
    color: #666;
  }
}

@media (prefers-color-scheme: dark) {
  button {
    background-color: #444;
  }

  button:hover {
    background-color: #666;
  }

  button:active {
    background-color: #888;
  }

  input {
    background-color: #444;
  }

  input[type="text"],
  input[type="password"] {
    box-shadow: 0 -0.1em 0 inset white;
  }

  tr:nth-child(even) {
    background-color: #444;
  }

  .error {
    font-weight: bold;
    color: #f55;
  }

  .none {
    color: #aaa;
  }
}