body {
  margin: 0px;
  color: #fcfcfc;
  background-color: #222;
  font-family: 'Fira Sans', sans-serif;
}

/* sidebar */

#sidebar {
  display: flex;
  flex-direction: column;
  float: left;
  width: 450px;
  height: 100vh;
  margin: 0px;
  padding: 0px;
  border-width: 0px 1px 0px 0px;
  border-style: solid;
  border-color: #555;
}

/* add-remove */

#add-remove {
  display: flex;
  gap: 8px;
  margin: 8px;
}

#add-remove > button {
  width: 32px;
  height: 32px;
  font-size: large;
}

/* KLUDGE */
#add-remove > button.emoji {
  font-family: 'Noto Emoji', sans-serif;
}

/* outline */

#outline {
  flex-grow: 1;
  margin: 0px;
  padding: 0px;
  overflow-y: scroll;
}

li {
  user-select: none;
}

summary {
  display: flex;
}

summary.selected {
  color: #fff;
  background-color: #444;
}

summary > div, .constraint {
  padding-top: 4px;
  padding-bottom: 4px;
}

.elt, .constraint {
  display: flex;
  flex-grow: 1;
  padding-left: 8px;
  padding-right: 8px;
}

.elt-switch {
  width: 18px;
  padding-left: 2px;
  text-align: center;
}

details:has(li) .elt-switch::after {
  content: '▸';
}

details[open]:has(li) .elt-switch::after {
  content: '▾';
}

.elt-label {
  flex-grow: 1;
}

.constraint-label {
  flex-grow: 1;
}

.elt-rep {
  display: flex;
}

.elt-rep > div {
  padding: 2px 0px 0px 0px;
  font-size: 10pt;
  font-variant-numeric: tabular-nums;
  text-align: right;
  width: 56px;
}

.constraint {
  font-style: italic;
}

.constraint.invalid {
  color: #f58fc2;
}

.constraint > input[type=checkbox] {
  margin: 0px 8px 0px 0px;
}

.constraint > input[type=text] {
  color: inherit;
  background-color: inherit;
  border: 1px solid #555;
  border-radius: 2px;
}

.constraint.invalid > input[type=text] {
  border-color: #70495c;
}

.status {
  width: 20px;
  padding-left: 4px;
  text-align: center;
  font-family: 'Noto Emoji';
  font-style: normal;
}

.invalid > .status::after, details:has(.invalid):not([open]) .status::after {
  content: '⚠';
  color: #f58fc2;
}

/* display */

canvas {
  float: left;
  margin-left: 20px;
  margin-top: 20px;
  background-color: #020202;
  border: 1px solid #555;
  border-radius: 16px;
}

canvas:focus {
  border-color: #aaa;
}