:root {
  color-scheme: dark light;
}

html:has(body[data-color-scheme="dark"]) {
  color-scheme: dark;
}
html:has(body[data-color-scheme="light"]) {
  color-scheme: light;
}

body {
  font-family: monospace;
}

table {
  border-spacing: 16px 4px;
}

form {
  display: inline-grid;
  grid-template-columns: auto auto auto;
  gap: 8px;

  label {
    text-align: right;
    display: grid;
    align-items: start;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
  }

  fieldset {
    display: grid;
    grid-column: 1 / -1;
    gap: 8px;

    input {
      margin: 0;
    }

    label {
      grid-column: span 1;
      display: flex;
      gap: 8px;
      align-items: center;
    }
  }

  input {
    grid-column: span 2;
  }

  input:has(+ button) {
    grid-column: span 1;
  }

  label button {
    grid-column: span 1;
  }

  button {
    grid-column: 1 / -1;
  }
}

th,
tr {
  text-align: right;
}

tbody {
  tr[data-applicable="false"] {
    opacity: 0.5;
  }
}