.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;
}

.pattern-tool-page button {
  min-height: 24px;
  padding: 6px 10px;
  border: 1px solid var(--site-ink);
  color: var(--site-surface);
  background: var(--site-red);
  font-family: monospace;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--site-steel);
}

.pattern-tool-page button:hover,
.pattern-tool-page button:focus-visible {
  color: var(--site-red);
  background: var(--site-surface);
  outline: 2px solid var(--site-red);
  outline-offset: 1px;
}

.pattern-tool-page button:active {
  box-shadow: none;
  transform: translate(2px, 2px);
}

.pattern-tool-page button[disabled] {
  background: var(--site-steel);
  cursor: default;
  box-shadow: none;
}

#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 dotted var(--site-ink);
  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;
  border: 3px double var(--site-red);
  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;
  }
}