:root {
  --text: #fcfcfc; /* almost white */
  --text-bright: white;
  --text-invalid: #f58fc2; /* bright pink */
  --border: #555; /* light gray */
  --border-focus: #aaa; /* bright gray */
  --border-invalid: #70495c; /* dusky pink */
  --selection-highlight: #444; /* medium gray */
  --page-background: #222; /* dark gray */
  --display-background: #020202; /* almost black */
}

body {
  margin: 0px;
  color: var(--text);
  background-color: var(--page-background);
  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: var(--border);
}

/* add-remove */

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

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

/* KLUDGE */
/*
  for convenience, we're using emoji as temporary icons for some buttons. these
  buttons need to be displayed in an emoji font
*/
#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: var(--text-bright);
  background-color: var(--selection-highlight);
}

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

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

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

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

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

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

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

.element-representation {
  display: flex;
}

.element-representation > 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: var(--text-invalid);
}

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

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

.constraint.invalid > input[type=text] {
  border-color: var(--border-invalid);
}

.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: var(--text-invalid);
}

/* display */

canvas {
  float: left;
  margin-left: 20px;
  margin-top: 20px;
  background-color: var(--display-background);
  border: 1px solid var(--border);
  border-radius: 16px;
}

canvas:focus {
  border-color: var(--border-focus);
}