@import "/defs.css";

body { margin: 0; overflow: hidden }

#machine {
  display: grid;
  grid-template-columns: 3fr 1rem 1fr .4rem 1fr .4em 1fr;
  grid-template-rows: auto auto auto auto auto auto 1fr;
}
#machine > div, #machine dl { display: contents }
#machine .instructions { grid-column: 1 / span 1; grid-row: 1 / span 1 }
#machine .registers    { grid-column: 3 / span 5; grid-row: 1 / span 1 }
#machine .controls     { grid-column: 3 / span 5; grid-row: 5 / span 1 }
#machine .code         { grid-column: 1 / span 1; grid-row: 2 / -1 }
#machine .ip           { grid-column: 3 / span 1; grid-row: 3 / span 1 }
#machine #ip           { grid-column: 3 / span 1; grid-row: 4 / span 1 }
#machine .r0           { grid-column: 5 / span 1; grid-row: 3 / span 1 }
#machine #r0           { grid-column: 5 / span 1; grid-row: 4 / span 1 }
#machine .r1           { grid-column: 7 / span 1; grid-row: 3 / span 1 }
#machine #r1           { grid-column: 7 / span 1; grid-row: 4 / span 1 }
#machine .buttons      { grid-column: 3 / span 5; grid-row: 6 / span 1 }

#machine button:active      { position:relative; left: -1px; top: -1px; }
#machine button:active img  { position: relative; top: 2px; left: 2px; transform: scale(0.95) }

#machine dd {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
}

#machine .buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  min-width: 15rem;
  width: 70%;
  margin: 0 auto;
}

#machine                    { background-color: #bbc; border: 2px outset #dde }
#machine .label             { background-color: var(--color); color: var(--initial); border: 1px solid rgb(133, 37, 37) }
#machine .code, #machine dd { background-color: #333; border: 1px inset #444; color: var(--initial) }
#machine button             { background-color: #ccd; border: 2px outset #dde; border-radius: 9px; outline: 2px inset #aab; }
#machine button:active      { background-color: #bbc; border: 1px inset #aab }

@media (prefers-color-scheme: dark) {
  #machine                    { background-color: #556; border: 2px outset #778 }
  #machine .label             { background-color: var(--color); color: var(--initial); border: 1px solid rgb(37, 90, 133) }
  #machine .code, #machine dd { background-color: #222; border: 1px inset #333; color: var(--text) }
  #machine button             { background-color: #889; border: 2px outset #99a; border-radius: 9px; outline: 2px inset #667; }
  #machine button:active      { background-color: #778; border: 1px inset #667 }
}

#machine              { padding: 1rem 1rem 1rem 3rem }
#machine .label       { margin-bottom: .5rem }
#machine .controls    { margin-top: 1rem }
#machine dd           { margin-left: 0; padding: .5rem }
#machine .code        { padding: 1rem; margin: 0; list-style: none }
#machine .code img    { position: absolute; margin: 0 0 0 calc(-2rem - 17px) }
#machine .buttons svg { margin: .5rem }

#machine .label                          { font-family: var(--small-caps); font-weight: bold }
#machine .ip, #machine .r0, #machine .r1 { font-family: var(--monospace); font-weight: normal }
#machine .code                           { font-family: var(--monospace); line-height: 2rem }

#machine .label { text-align: center; }
#machine img    { margin: 0 }

@media only screen and (max-width: 530px) {
  #machine {
    grid-template-columns: 1fr .4rem 1fr .4rem 1fr;
    grid-template-rows: repeat(7, auto);
  }

  #machine .instructions { grid-column: 1 / -1; grid-row: 1 / span 1 }
  #machine .registers    { grid-column: 1 / -1; grid-row: 3 / span 1 }
  #machine .controls     { grid-column: 1 / -1; grid-row: 6 / span 1 }
  #machine .code         { grid-column: 1 / -1; grid-row: 2 / span 1 }
  #machine .ip           { grid-column: 1 / span 1; grid-row: 4 / span 1 }
  #machine #ip           { grid-column: 1 / span 1; grid-row: 5 / span 1 }
  #machine .r0           { grid-column: 3 / span 1; grid-row: 4 / span 1 }
  #machine #r0           { grid-column: 3 / span 1; grid-row: 5 / span 1 }
  #machine .r1           { grid-column: 5 / span 1; grid-row: 4 / span 1 }
  #machine #r1           { grid-column: 5 / span 1; grid-row: 5 / span 1 }
  #machine .buttons      { grid-column: 1 / -1; grid-row: 7 / span 1 }

  #machine { padding-left: 1rem }
  #machine .code { margin-left: 2rem }
  #machine .registers { margin-top: 1rem }
}