:root { color-scheme: light dark; }

#pads {
  padding-top: 6em;
}

/* Each textarea on its own row, centered with max width */
#pads .pad-row {
  display: grid;
  grid-template-columns: 1fr auto; /* textarea + buttons column */
  grid-auto-rows: min-content;
  gap: 8px;
  align-items: start;
  max-width: 1200px;
  margin: 8px auto;
}

.muted {
  color: #434;
}

#pads .pad-row textarea {
  font-size: 11pt;
  display: block;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  padding: 8px;
  grid-column: 1;
  grid-row: 1 / span 2; /* span two rows to align with two buttons */
}

#pads .pad-row button {
  grid-column: 2;
  width: 5em;
  box-sizing: border-box;
  justify-self: start;
}

/* Colors and stacking (copy above reset) */
#pads .pad-row button[id^="copy-"] {
  margin-top: 1em;
  background: lightgreen;
  color: #000;
  grid-row: 1;
}

#pads .pad-row button[id^="reset-"] {
  margin-bottom: 1em;
  background: lightblue;
  color: #000;
  grid-row: 2;
}