:root {
  color-scheme: light dark;

  --stroke-major: light-dark(#000, #fff);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-family: sans-serif;

  --body-padding: 1em;
  padding: var(--body-padding);
}

/* dragging cursors */
.draggable {
  cursor: grab;
  pointer-events: all;
}

body.dragging,
body.dragging .draggable {
  cursor: grabbing;
}

svg {
  display: block;
  width: 70%;

  align-self: flex-start;

  * {
    pointer-events: none;
  }
}

.plot {
  fill: none;
  stroke: #ae81ff;
  stroke-width: 0.05;
}

.point-y {
  cursor: grab;
  fill: #1a69b5;
}

.line-y {
  stroke-dasharray: 0.05 0.05;
  stroke: #1a69b5;
  stroke-width: 0.01;
}

.point-x {
  fill: #a52117;
}

.line-x {
  stroke-dasharray: 0.05 0.05;
  stroke: #a52117;
  stroke-width: 0.01;
}

/* mobile dragging */
.fat-fingers {
  fill: transparent;
}

@media (any-hover: hover) {
  .fat-fingers {
    display: none;
  }
}

/* form */
form {
  padding-left: 1em;

  /* desktop */
  @media (768px < width) {
    padding-left: 3em;
  }

  /* katex stuff */
  > span {
    display: block;
    font-size: 2em;

    /* mobile */
    @media (width <= 480px) {
      margin: 1em 0;
    }

    /* tablet */
    @media (480px < width <= 768px) {
      font-size: 1.5em;
      margin: 2em 0;
    }

    /* desktop */
    @media (768px < width) {
      margin: 2em 0;
    }
  }
}

button {
  border-radius: 2px;
  box-shadow: 0 0 2px #000;
  border: none;
  color: #fff;
  display: block;
  font-size: 2em;
  padding: 0.2em;
  user-select: none;
}

#find-inverse {
  background: #1bbb68;

  &:active {
    background: #169653;
  }
}

#test-region {
  fill: #169653;
  fill-opacity: 0.5;
}

#pause-resume {
  background: #ff0;
  color: #444;
  margin: 1em 0;

  &:active {
    background: #dd0;
  }
}

#x-approx {
  /* tablet */
  @media (width <= 768px) {
    font-size: 0.9em;
  }
}

/* hiding */
.point-x,
.line-x,
#x-approx,
#test-region,
#pause-resume {
  visibility: hidden;

  .show-x & {
    visibility: visible;
  }
}

/* grid */
.gridline {
  stroke: #666;
  stroke-width: 0.01;
}

.major-axis {
  stroke: var(--stroke-major);
  stroke-width: 0.08;
}

.axis-label {
  fill: var(--stroke-major);
  font-size: 0.04ex;
  text-anchor: middle;
  stroke: none;
}

.axis-tick {
  stroke: #777;
  stroke-width: 0.05;
}

text {
  user-select: none;
}

/* mobile styling */
main {
  display: flex;
  height: 100%;
  width: 100%;

  @media (width <= 480px) {
    flex-direction: column;
  }
}

@media (480px < width) and (min-aspect-ratio: 8 / 5) {
  svg {
    height: calc(100vh - 2 * var(--body-padding));
  }
}