input, button {
  font-size: inherit;
}

button {
  color: black;
  background-color: transparent;
}

body {
  font-family: Arial;
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: fixed;
  inset: 0; 
}

#grid > line {
  stroke: black;
  stroke-width: 0.1;
  
  &.bold {
    stroke-width: 0.75;
  }
}

#numbers > text {
  stroke: white;
  fill: black;
  paint-order: stroke;
  dominant-baseline: middle;
  text-anchor: middle;
  
  &.x {
    dominant-baseline: hanging;
  }
  
  &.y {
    text-anchor: end;
  }
}

#lines > line {
  stroke: black;
  stroke-width: 0.5;
  stroke-linecap: round;
}

#list {
  min-height: 4rem;
  flex: 1;
  overflow: auto;
  
  > div {
    padding: 5px;
    border-bottom: 2px solid grey;
    display: flex;
    gap: 5px;
    
    > label {
      display: flex;
      flex-direction: column;
      gap: 5px;
      
      > input {
        box-sizing: border-box;
        width: 100%;
        height: 1.5rem; 
        padding: 0;
        display: block;
      }
    }
    
    > label.equation {
      flex: 1;
      
      > span {
        /* somehow prevents weird text resize */
        margin-inline: auto;
      }
      
      > input {
        vertical-align: middle;
        padding-inline: 0.75rem;
      }
    }
  }
}

#add {
  flex-shrink: 0;
}

.round {
  border-radius: 0.75rem;
}

.box-thin {
  border: 1px solid grey;
}

.box-thick {
  border: 2px solid grey;
}

.tall {
  height: 2rem;
  display: block;
}