#template-control {
  padding: 2rem 0;
}

#template-control .tab{
  flex: 1 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  gap: 5px;
  overflow: scroll;
}

#template-list-container .card {
  max-width: 400px;
  min-width: 300px;
  flex-grow: 1;
  margin: 0;
  color: white;
}

article p {
  white-space: pre-wrap;
}

#editor-form {flex: 1}
#editor-container {margin:0}
#editor-container > li{margin-bottom:2rem}
#editor-container > li::marker {content:''}



.list-controls {
  display: inline;
}



#result-preview-container {
  background-color: #2a2a2a;
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 1rem;
}

/*
 * TEMPLATE TAB STYLING
 */
#template-control>input,
#template-list-container>.tab { display:none }
#template-tab-control {
  width:100%;
  border-bottom:1px solid var(--color-border);
}
#template-tab-control ul { list-style:none;margin:0;display:flex }
#template-tab-control label {
  padding:0.5em 1em;margin:0;width:fit-content;
  border:1px solid var(--color-border);
  border-bottom:0;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
} 
/*
 * this style should be autogenerated by the index.js
 * (within an inline stylesheet)
 * as it populates with the templates defined within the manifest
 */
#cat-default:checked ~ #template-list-container .cat-default { display:flex }
#cat-default:checked ~ #template-tab-control .cat-default { background-color: var(--color-surface) }