.pattern-tool-page #container {
}

.tool-main {
  width: 100%;
  margin-bottom: 0;
}

#bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
  color: var(--site-deep);
  font-family: monospace;
  font-size: 0.75em;
}

#bar input[type="range"],
#repair input[type="range"] {
  width: 160px;
  margin: 0;
  accent-color: var(--site-red);
}

.value {
  color: var(--site-red);
  font-weight: 700;
}

#tileName {
  margin-right: auto;
}

#repairToggle[aria-expanded="true"] {
  color: var(--site-red);
  background: var(--site-surface);
}

#warning {
  margin: 0 0 10px;
  padding: 6px 8px;
  border: 1px dotted var(--site-red);
  background: var(--site-surface);
  color: var(--site-red);
  font-family: monospace;
  font-size: 0.75em;
}

#repair {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
  padding: 8px;
  border: 1px solid #808080;
  box-shadow: 1px 1px #fff, inset 1px 1px #fff;
  background: var(--site-surface);
  color: var(--site-deep);
  font-family: monospace;
  font-size: 0.75em;
}

#repair[hidden] {
  display: none;
}

#field {
  height: 62vh;
  min-height: 340px;
  box-shadow: var(--sunken);
  background: var(--site-surface) repeat;
  image-rendering: pixelated;
}

body.drag #field {
  outline: 3px dashed var(--site-red);
  outline-offset: -6px;
}

@media only screen and (max-width: 800px) {
  #bar input[type="range"],
  #repair input[type="range"] {
    width: 100%;
  }

  #tileName {
    margin-right: 0;
  }

  #field {
    height: 56vh;
  }
}

/* before a tile lands, the field says what it is for */
#field:not([style*="background-image"]) {
  display: grid;
  place-items: center;
  cursor: pointer;
}

#field:not([style*="background-image"])::before {
  content: "✦ drop, paste, or upload a tile to see it repeat ✦";
  padding: 20px;
  color: var(--site-red);
  font-family: var(--heading-font);
  font-size: 22px;
  text-align: center;
}