body {
  display: grid;

  margin: 0rem;
  
  font-family: system-ui;
}
/* 32rem + 24rem = 56rem */
@media (width >= 56rem) {
  body {
    grid: 100vh / 1fr 24rem;
  }

  #control {
    height: 100vh;
  }
}
@media (width < 56rem) {
  body {
    grid: 100vh auto / 100vw;
  }
}

#output {
  display: grid;
  grid: 1fr auto / 1fr;
  gap: 1rem;

  box-sizing: border-box;
  height: 100vh;
  padding: 1rem;

  overflow: hidden scroll;
}

#canvas-container {
  grid-area: 1 / 1;
  z-index: 0;

  display: grid;

  position: relative;
  height: 100%;
  width: 100%;

  overflow: scroll;
}
#canvas {
  place-self: center;

  position: absolute;  /* For ResizeObserner. */
}

#graph-container {
  grid-area: 1 / 1;
  z-index: 1;
  place-self: center;

  display: grid;
  gap: 1rem;

  max-height: 100%;
  max-width: 100%;

  overflow: scroll;
}
/* 1rem + 13.5rem + 1rem + 13.5rem + 1rem + 14rem + 1rem = 45rem */
/* 45rem + 1rem = 46rem for slight thickness of border. */
@media (height >= 46rem) {
  #graph-container {
    grid: auto auto / auto auto;
  }
  #graph-container > div:nth-of-type(even) {
    order: 1;
  }
}
@media (height < 46rem) {
  #graph-container {
    grid: auto / auto auto auto auto;
  }
}
.graph {
  display: grid;
  grid:
    ". . c c c" 1rem
    ". y c c c" 10rem
    ". . c c c" 1rem
    ". . . x ." 1rem
    ". . . . ." 0.5rem /
    0.5rem 1rem 1rem 10rem 1rem;

  height: 13.5rem;
  width: 13.5rem;
  border: 1px solid oklch(80% 0% 0deg);
  border-radius: 0.5rem;

  background-color: white;
}
.graph > canvas {
  grid-area: c;  /* canvas */

  height: 12rem;
  width: 12rem;
}
.graph > div {
  place-self: center;

  font-size: 0.75rem;
}
.graph > div:nth-of-type(1) {
  grid-area: x;  /* X label */
}
.graph > div:nth-of-type(2) {
  grid-area: y;  /* Y label */

  transform: rotate(-90deg);
}

#stat {
  grid-area: 2 / 1;
  place-self: center;

  display: grid;
  grid: 3.5rem 3.5rem 3.5rem 3.5rem / 1fr auto auto auto auto auto 6rem;

  width: 30rem;  /* 32rem - 1rem - 1rem */
  height: 14rem;  /* 3.5rem * 4 */
}
#stat > div {
  place-self: center;

  line-height: 3.5rem;
}
#stat > div:nth-of-type(7n + 1) {
  justify-self: start;
}
#stat > div:nth-of-type(7n + 3), #stat > div:nth-of-type(7n + 6) {
  padding: 0rem 0.5rem;
}
#stat > div:nth-of-type(7n + 7) {
  justify-self: end;

  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
}

#control {
  place-self: start center;

  display: flex;
  flex-direction: column;
  gap: 1rem;
  
  box-sizing: border-box;
  width: 100%;
  padding: 1rem;

  background-color: oklch(95% 0% 0deg);
  overflow: hidden scroll;
}
.box {
  align-self: center;

  display: flex;
  flex-direction: column;
  gap: 1rem;

  box-sizing: border-box;
  width: 22rem;  /* 24rem - 1rem - 1rem */
  border-radius: 0.5rem;
  padding: 1rem;

  background-color: white;
}

details[open], #sigma-container, #J-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
details > summary {
  display: grid;
  grid:
    "s t . m" auto /
    auto auto 1fr auto;
  gap: 0.5rem;

  cursor: pointer;
}
details > summary > div {
  place-self: center;

  line-height: 2rem;
}
details > summary > div:nth-of-type(1) {
  grid-area: s;  /* spinner */

  height: 1rem;
  width: 1rem;

  background-position: center center;
  background-repeat: no-repeat;
  background-image: url("img/closed.svg");
}
details[open] > summary > div:nth-of-type(1) {
  background-image: url("img/opened.svg");
}
details > summary > div:nth-of-type(2) {
  grid-area: t;  /* text */
}
details > summary > div:nth-of-type(3) {
  grid-area: m;  /* math */
}

.slider {
  display: grid;
  grid:
    "i t . m n" 2.5rem
    "r r r r r" auto /
    auto auto 1fr auto auto;
}
.slider > div {
  align-self: center;
}
.slider > canvas, .slider > img {
  grid-area: i;  /* image */
  align-self: center;

  margin-right: 0.5rem;
}
.slider > div:nth-of-type(1) {
  grid-area: t;  /* text */

  line-height: 2.5rem;
}
.slider > div:nth-of-type(2) {
  grid-area: m;  /* math */

  line-height: 2.5rem;
  margin-right: 0.5rem
}
.slider > input[type="number"] {
  grid-area: n;  /* number */
}
.slider > input[type="range"] {
  grid-area: r;  /* range */

  margin-top: 0.5rem;
}

#N {
  align-items: center;

  display: grid;
  grid: 2.5rem / auto 1fr auto auto auto auto;
  gap: 0.5rem;
}
#N > div {
  line-height: 2.5rem;
}
#N > input {
  width: 4rem;
}
#N > :nth-child(2) {
  grid-column: 3;
}
#N > :nth-child(3) {
  grid-column: 4;
}
#N > :nth-child(4) {
  grid-column: 5;
}
#N > :nth-child(5) {
  grid-column: 6;
}

input[type="number"] {
  box-sizing: border-box;
  height: 2.5rem;
  width: 6rem;
  border: 1px solid oklch(90% 0% 0deg);
  border-radius: 0.5rem;
  padding: 0.25rem;

  -moz-appearance: textfield;
  font-family: system-ui;
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
}
input[type="number"]:hover {
  border-color: oklch(80% 0% 0deg);
}
input[type="number"]:active {
  border-color: oklch(90% 0% 0deg);
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  margin: 0rem;

  -webkit-appearance: none;
}

input[type="range"] {
  height: 16px;
  width: 100%;
  margin: 0rem;

  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  height: 1rem;
  width: 1rem;
  margin: -4px 0px;
  border-radius: 0.5rem;

  -webkit-appearance: none;
  background-color: oklch(50% 0% 0deg);
  box-shadow: none;
}
input[type="range"]::-moz-range-thumb {
  height: 1rem;
  width: 1rem;
  border: none;
  border-radius: 0.5rem;

  background-color: oklch(50% 0% 0deg);
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  width: 100%;
  border-radius: 4px;

  background-color: oklch(90% 0% 0deg);
}
input[type="range"]::-moz-range-track {
  height: 8px;
  width: 100%;
  border-radius: 4px;

  background-color: oklch(90% 0% 0deg);
}
input[type="range"]::-webkit-slider-runnable-track:hover {
  background-color: oklch(80% 0% 0deg);
}
input[type="range"]::-moz-range-track:hover {
  background-color: oklch(80% 0% 0deg);
}
input[type="range"]::-webkit-slider-runnable-track:active {
  background-color: oklch(90% 0% 0deg);
}
input[type="range"]::-moz-range-track:active {
  background-color: oklch(90% 0% 0deg);
}

.button-container {
  display: flex;
  gap: 1rem;
}
button {
  box-sizing: border-box;
  height: 2.5rem;
  width: 100%;
  border: 1px solid oklch(80% 0% 0deg);
  border-radius: 0.5rem;
  padding: 0.25rem;

  background-color: white;
  color: black;
  cursor: pointer;
  font-family: system-ui;
  font-size: 1rem;
}
button:disabled {
  cursor: auto;
  opacity: 50%;
}
button:not(:disabled):hover {
  background-color: oklch(95% 0% 0deg);
}
button:not(:disabled):active {
  background-color: oklch(90% 0% 0deg);
}
#resume, #pause, #add, #remove {
  background-position: center center;
  background-repeat: no-repeat;
}
#resume {
  background-image: url("img/resume.svg");
}
#pause {
  background-image: url("img/pause.svg");
}
#add {
  background-image: url("img/add.svg");
}
#remove {
  background-image: url("img/remove.svg");
}

header {
  align-self: center;

  box-sizing: border-box;
  width: 22rem;  /* 24rem - 1rem - 1rem */
}
header > h1 {
  margin: 0rem;
}
header > div:nth-of-type(2) {
  padding-top: 0.5rem;
}
header > div:nth-of-type(2) > a {
  color: oklch(50% 0% 0deg);
}
header > div:nth-of-type(2) > a:hover {
  color: black;
}

#hamiltonian {
  place-self: center;
  
  line-height: 4rem;
}

.sigma > canvas {
  height: 32px;
  width: 32px;
  border-radius: 0.25rem;
}