:root {
  line-height: 1.6;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
  word-break: break-word;
}

:root, input, textarea, select, button {
  font-size: 15pt;
  font-family: system-ui, Arial, Helvetica, sans-serif;
}

body {
  background: white;
  margin: 0 1rem; 
  padding: 0;
  /* we should make column width a toggleable property */
  /* column-width: 15rem; */
}

@media screen and (max-width: 666px) {
  :root {
    font-size: 12pt;
  }

  :root, input, textarea, select, button {
    font-size: 12pt;
    font-family: system-ui, Arial, Helvetica, sans-serif;
  }

  body {
    margin: 0.5rem; 
  }
}

header ol li,
header ul li,
[role="navigation"] ul li,
[role="navigation"] ol li,
nav ol li,
nav ul li {
  display: inline-block; 
  margin: 0 0.25rem;
}

a, span {
  margin-right: 0.175rem;
}

a *, span * {
  display: inline !important;
}

:not(input):not(option):not(textarea):not([contenteditable]):not(br):not(td):not(tr):not(th):empty {
  display: none;
}

button, input, [role="button"] {
  margin: 0.175rem;
  padding: 0.175rem 0.35rem;
}

p {
  margin: 0.35rem 0;
}

pre {
  max-width: 100%;
  white-space: pre-wrap;
}

table {
  empty-cells: hide;
}

th {
  text-align: left;
}

th:not(:empty), td:not(:empty) {
  min-width: fit-content;
}

[contenteditable] {
  background: white;
  border: 1px solid;
}

[contenteditable]:focus {
  outline: thin solid dodgerblue;
}

input, select, button, textarea, [contenteditable] {
  display: block;
}

fieldset, input[type="radio"], input[type="checkbox"] {
  display: inline-block;
}


[contenteditable]:focus-within {
  outline: thin solid dodgerblue;
}

[role="button"] {
  -webkit-appearance: button;
  appearance: button;
  width: fit-content;
}

[role="button"], [role="button"] * {
  text-decoration: none !important;
  color: black;
}

[role="button"] [role="button"] {
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  margin: 0;
}

[hidden], [aria-hidden="true"] {
  display: none;
}

time {
  font-style: italic;
  color: var(--grey);
}