/* The window of RunPsiExperiment.m: a 4 x 2 grid (message, two response
   buttons, start button, progress line), same proportions, sizes and colours. */

html, body {
  height: 100%;
  margin: 0;
  background: #fff;
}

body {
  font-family: Helvetica, Arial, sans-serif;
  color: #212121;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#app {
  box-sizing: border-box;
  height: 100vh;
  height: 100dvh;
  min-height: 480px;
  display: grid;
  grid-template-rows: 3fr 3fr 1fr 30px;
  grid-template-columns: 1fr 1fr;
  gap: 20px 60px;
  padding: 30px 60px;
}

#msg {
  grid-area: 1 / 1 / 2 / 3;
  align-self: center;
  text-align: center;
  font-size: 20px;
  line-height: 1.24;
  white-space: pre-line;
}

#msg.summary {
  font: 13px Menlo, Consolas, monospace;
  white-space: pre-wrap;
  -webkit-user-select: text;
  user-select: text;
}

#msg label {
  display: block;
  margin-bottom: 12px;
}

#msg input {
  font: inherit;
  width: 12em;
  padding: 6px 10px;
  text-align: center;
  border: 1px solid #7d7d7d;
  border-radius: 4px;
}

#msg .hint {
  margin-top: 12px;
  font-size: 14px;
  color: #b00020;
  min-height: 1.3em;
}

button, .button {
  margin: 0;
  padding: 0;
  font: inherit;
  color: #212121;
  background: #f0f0f0;
  border: 1px solid #7d7d7d;
  border-radius: 4px;
  cursor: pointer;
  touch-action: manipulation;
}

button[hidden], #dl[hidden] {
  display: none;
}

.resp {
  font-size: 44px;
  line-height: 1.27;
  white-space: pre-line;
}

.resp.mixed {
  font-size: 30px;
}

.resp:disabled {
  color: #b3b3b3;
  background: #fafafa;
  border-color: #d1d1d1;
  cursor: default;
}

.resp.chosen {
  background: rgb(140, 191, 242);
}

#btn1 { grid-area: 2 / 1; }
#btn2 { grid-area: 2 / 2; }

#go {
  grid-area: 3 / 1 / 4 / 3;
  font-size: 24px;
  background: #f5f5f5;
}

#dl {
  grid-area: 3 / 1 / 4 / 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}

#dl .button {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  text-align: center;
  text-decoration: none;
}

#prog {
  grid-area: 4 / 1 / 5 / 3;
  align-self: center;
  text-align: center;
  font-size: 14px;
  color: #808080;
}

@media (max-width: 640px) {
  #app { padding: 16px; gap: 16px; }
  #dl { gap: 16px; }
  #msg { font-size: 17px; }
  .resp { font-size: 34px; }
  .resp.mixed { font-size: 24px; }
  #go { font-size: 20px; }
}