:root {
  --default-top-padding: 1.5em;
}

body {
  min-height: 50vh;
  font-family: helvetica, Arial, sans-serif;
  font-size: 2vmin;
  background-color: #555;
  color: white;
  margin: 3vmin 4vmin 2vmin 4vmin;
}

/* iPad portait */
@media (max-width: 768px) {
  body {
    font-size: 3vmin;
  }

  button, input {
    padding-top: 2vmin;
  }
}

/* iPhone landscape only */
@media (max-width: 568px) {
  body {
    font-size: 4vmin;
  }
}

/* iPhone portait only */
@media (max-width: 320px) {
  body {
    font-size: 4vmin;
  }

}

*:focus {
  outline: 2px solid white;
  outline-offset: 2px;
}

dialog {
  color: white;
}

dialog:focus {
  outline: none;
}

dialog::backdrop {
  background: rgba(85, 85, 85, 0.80);
}

dialog.busy-dialog::backdrop {
  background: inherit;
}

.error-dialog {
  color: white;
  background-color: #AE0000;
}

.busy-dialog {
  color: white;
  background-color: #006900;
}

dialog p {
  margin-top: 0;
}

dialog.busy-dialog p {
  margin-bottom: 0;
}

dialog button {
  float: right;
}

dialog.busy-dialog button {
  display: none;
}

a {
  color: #ffffff;
}

header a {
  text-decoration: none;
}

/* kind of disabled link - text-decoration will be none automatically */
a:not([href]) {
  color: #AAAAAA;
}

header {
  margin-bottom: 1.5em;
}

nav {
  display: flex;
  align-items: center;
  column-gap: 0.7em;
}

h1 {
  font-size: 1.5em;
  margin: 0;
}

#output h1 {
  font-size: 2em;
}

#github {
  margin-left: auto;
}

#github-cat {
  height: 1.5em;
}

main .first-in-main {
  padding-top: calc(var(--default-top-padding) - 0.8em);
}

details {
  padding-top: var(--default-top-padding);
}

details[open] > #details {
  outline: 2px solid white;
  outline-offset: calc(1.5vmin - 1px);
}

details summary {
  cursor: pointer;
}

details[open] summary {
  padding-bottom: 1vmin;
  margin-bottom: 2vmin;
  margin-left: 3px;
}

details summary {
  padding-bottom: 0;
}

#details {
  margin: 1.5vmin;
}

#checkboxes, #selects {
  display: flex;
  column-gap: 3vmin;
  row-gap: 2vmin;
}

#selects {
  padding-top: var(--default-top-padding);
}

summary {
  width: 8ch;
}

input[type=checkbox] {
  margin-top: 0;
  margin-right: 1vmin;
  /* make the checkbox a bit bigger and move a bit down */
  transform: scale(1.5) translateY(2px);
}

input[type=checkbox]:focus {
  outline: 1.2px solid white;
  outline-offset: 1px;
}

select {
  font-size: inherit;
  margin-left: 1vmin;
}

label {
  font-size: 1em;
}

.labelLikeHeading {
  font-size: 1.2em
}

p.label {
  margin:0;
  font-size: 1.2em;
  display: inline;
  pointer-events: none;
}

/* select shall fill the rest of the column right from label */
.label-w-select {
  display: flex;
  justify-content: start;
}

.label-w-select select {
  flex-grow: 1;
}

.grow-wrap {
  /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
  display: grid;
}
.grow-wrap::after {
  /* Note the weird space! Needed to preventy jumpy behavior */
  content: attr(data-replicated-value) " ";
  /* This is how textarea text behaves */
  white-space: pre-wrap;
  /* Hidden from view, clicks, and screen readers */
  visibility: hidden;
}
.grow-wrap > textarea {
  /* You could leave this, but after a user resizes, then it ruins the auto sizing */
  resize: none;
  /* Firefox shows scrollbar on growth, you can hide like this. */
  overflow: hidden;
}
.grow-wrap > textarea,
.grow-wrap::after {
  /* Identical styling required!! */
  color: white;
  background-color: #555;
  font: inherit;
  font-size: inherit;
  padding: 0.5rem;
  margin-top: var(--default-top-padding);
  border: 1px solid white;
  outline: 1px solid white;
  /* 10vmin(margin body + col-gap); 1rem(padding textarea) */
  width: calc((100vw - 8vmin) / 2 - 3vmin);
  min-height: 44vh;
  /* Place on top of each other */
  grid-area: 1 / 1 / 2 / 2;
}

textarea#input:focus {
  outline: 3px solid white;
  outline-offset: 2px;
}

button, input {
  font-size: 1em;
  padding: 5px 10px;
  color: white;
  border: 2px solid;
  cursor: pointer;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  border-color: white;
  background-color: #333;
}

input[type="file"] {
  padding: 0;
  color: white;
  border: 0;
  background-color: inherit;
}

button:disabled, input:disabled, textarea:disabled {
  background-color: inherit;
  color: #AAAAAA;
  border-color: #AAAAAA;
  outline-color: #AAAAAA;
  pointer-events: none;
}

div.disabled, p.disabled, label.disabled, #output.disabled {
  background-color: inherit;
  color: #AAAAAA;
  border-color: #AAAAAA;
  outline-color: #AAAAAA;
  pointer-events: none;
}

label:has(> input:disabled) {
  color: #AAAAAA;
}

form.file {
  padding-top: var(--default-top-padding);
}

div.download {
  /* + 5px to align with the button in the left segment */
  padding-top: calc(var(--default-top-padding) + 5px);
}

#example {
  margin-top: var(--default-top-padding);
}

.two-column {
  padding-top: var(--default-top-padding);
  display: grid;
  grid-template-columns: calc((100vw - 8vmin) / 2 - 1vmin) calc((100vw - 8vmin) / 2 - 1vmin);
  column-gap: 2vmin;
  row-gap: 2vmin;
}

.right {
  /* 8vmin(margin body) / - 1vmin(half col gap) */
  width: calc((100vw - 8vmin) / 2 - 1vmin);
}

.flex-space-between {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

#output {
  margin-top: var(--default-top-padding);
  padding: 0.5rem;
  border: 1px solid white;
  outline: 1px solid white;
  min-height: 44vh;
}

pre {
  text-wrap: pretty;
  word-break: break-word;
  margin: 0;
  font-family: inherit;
}

th {
  text-align: left;
}