html,
body,
#app {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#app {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "input-area parsed-area"
    "tokens-area parsed-area";
}

#input-area,
#tokens-area,
#parsed-area,
#parsed-diagram-area {
  border: 1px solid black;
  padding: 10px;
  overflow: auto;
}

#input-area {
  grid-area: input-area;
  overflow: hidden;
}
#tokens-area {
  grid-area: tokens-area;
}
#parsed-area {
  grid-area: parsed-area;
}
#parsed-diagram-area {
  grid-area: parsed-diagram-area;
}

.math {
  font-family: Symbola, "Times New Roman", serif;
  font-size: 24px;
  font-weight: 400;
  padding: 0.25em 0.5em;
  /* font-size: 75px; */

  display: inline-block;
  border: 1px solid black;

  /* No wrapping */
  box-sizing: border-box;
  white-space: nowrap;
  max-width: 100%;
  overflow-x: auto;
}

.strand > * {
  margin: 0 0.08em;
}

.cursor {
  margin: 0 -0.04em;
  display: inline-block;
  border-left: 1px solid black;
  vertical-align: baseline;
  animation: blink 1s steps(1) infinite;

  /* 
    The cursor contains a zero-width space for styling purposes (so it has a natural character height but no width).
    If users accidentally copy & pasate this character, it can be very confusing, so we disable selecting it.
  */
  user-select: none;
}

@keyframes blink {
  0%,
  50% {
    border-left-color: black;
  }
  50.01%,
  100% {
    border-left-color: transparent;
  }
}

.selected {
  background-color: rgba(0, 120, 215, 0.3);
}

.fraction {
  display: inline-block;
  text-align: center;
  font-size: 0.85em;
  vertical-align: 0.33em; /* 4. Move the fraction up slightly relative to the surrounding text. This adjusts the fraction so that the fraction bar is inline with the center of the surrounding text rather than the surrounding text's baseline. */
}

.fraction .fraction .fraction {
  font-size: 1em; /* Stop shrinking font size after third level */
}

.numerator {
  display: block;
  overflow: hidden; /* 3. When an element's overflow property is not "visible", its baseline becomes the bottom edge of the element rather than the baseline of the text within it. This is good because it aligns the center of the fraction (the bottom of the numerator) with the baseline of the surrounding text. */

  /* Avoid clipping cursor on right edge of numerator due to overflow: hidden */
  padding: 0 1px;
  margin: 0 -1px;
}

.denominator {
  display: block;
  float: left; /* 1. This causes the denominator to be taken out of the text flow, making the baseline of the numerator align with the overall baseline. (This is then adjusted to center the fraction bar.) */
  width: 100%; /* 2. Floating this element causes it to stop being full width, but we want it to be full width just like the numerator is so that centering the text works. */
}

.denominator::before {
  user-select: none;
  content: "";
  display: block;
  height: 0.06em;
  background: currentColor;
  width: 100%;
  border-radius: 0.03em;
}

.numerator:empty::after,
.denominator:empty::after {
  display: inline-block;
  content: "";
  width: 0.6em;
  height: 0.6em;
  background: #ddd;
}

.subsup {
  display: inline-block;
  font-size: 0.6em;
  vertical-align: 0.33em;
}

.subscript {
  display: block;
  float: left;
  width: 100%;
}

.superscript {
  display: block;
  overflow: hidden;

  padding: 0 1px;
  margin: 0 -1px;
}

.radical {
  display: inline-flex;
  align-items: flex-start;
  position: relative;
}

.radical-index {
  font-size: 0.75em;
}

.radicand {
  position: relative;
  display: inline-block;
  border-top: 0.1em solid currentColor;
  border-left: 0.1em solid currentColor;
}

.radicand::before {
  content: "";
  position: absolute;
  width: 0.35em;
  height: 0.35em;
  bottom: 0em;
  left: -0.1em;
  transform-origin: center center;
  transform: translateX(-50%) translateY(-20%) rotate(-45deg);
  border-left: 0.1em solid currentColor;
  box-sizing: border-box;
  font-size: 1em;
}

.matrix {
  display: inline-table;
  position: relative;
  font-size: 0.9em;
  text-align: center;
  vertical-align: middle;
}

.matrix-square {
  padding-left: 0.2em;
  padding-right: 0.2em;
}

.matrix-square::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0.25em;
  height: 100%;
  border-top: 0.1em solid currentColor;
  border-left: 0.1em solid currentColor;
  border-bottom: 0.1em solid currentColor;
}

.matrix-square::after {
  content: " ";
  position: absolute;
  right: 0;
  top: 0;
  width: 0.25em;
  height: 100%;
  border-top: 0.1em solid currentColor;
  border-right: 0.1em solid currentColor;
  border-bottom: 0.1em solid currentColor;
}