@import '../machine/base.css';
@import '../machine/controls.css';

/* One question with a button on it, so the page is a column and nothing else.
   Anything drawn here that is not a control or a number is in the way of the
   only thing being tested. */
.page--lab {
  max-width: 820px;
  font-family: var(--font-ui);
}

.lab-throw {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.lab-throw .btn {
  min-height: 0;
  padding: 10px 16px;
  font-size: 12px;
}

.lab-knobs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px 20px;
  margin-bottom: 14px;
}

.lab-knob {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lab-knob input {
  flex: 1;
}

.roll {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px solid var(--depth);
}

.roll .btn {
  min-height: 0;
  padding: 4px 8px;
  font-size: 9px;
}

.roll-play {
  min-width: 78px;
}

.roll-read {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 4px 14px;
  min-width: 0;
}

.roll-seed {
  min-width: 74px;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--muted);
}

.roll-number {
  min-width: 78px;
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--fg);
}

/* A loop and its stems: the throw on one line, what it is made of on the next,
   each of them playable and takeable on its own. */
.roll-group {
  border-bottom: 1px solid var(--depth);
}

.roll-group .roll {
  border-bottom: 0;
}

.roll-stems {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 0 6px 88px;
}

.roll-stems .btn {
  min-height: 0;
  padding: 3px 7px;
  font-size: 9px;
}

.lab-knob select {
  min-height: 0;
  padding: 4px 6px;
  font-size: 10px;
}