/* reuben moss: the directory-listing look, in one file */
:root { color-scheme: light; }
body { margin: 8px; background: #fff; color: #000; font-family: serif; }
img, iframe, video { max-width: 100%; }
img { height: auto; display: block; }
iframe { border: 0; height: auto; display: block; margin-bottom: 8px; }
h1 { overflow-wrap: anywhere; }

table, p, ol, .sig { font: 13px/1.35 monospace; }
table { border-collapse: collapse; width: 100%; }
th, td { padding: 1px 2ch 1px 0; text-align: left; vertical-align: top; font-weight: normal; }
th:first-child, td:first-child { padding-left: 6ch; white-space: nowrap; }
td:nth-child(2), th:nth-child(2) { white-space: nowrap; }
td:last-child::before { content: "-  "; }
thead th { border-bottom: 1px solid #888; padding-bottom: 3px; }
tbody tr:first-child td { padding-top: 4px; }
.sub td:first-child { padding-left: 9ch; }
p { max-width: 120ch; margin: 1em 0 1em 0; }
hr { border: 0; border-top: 1px solid #888; margin: 1em 0; }
button { font: inherit; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; }
.toggle { text-align: left; }

/* one random image; the first shows if scripts are off */
.random a { display: none; }
.random a:first-child, .random a.on { display: block; }
.random.ready a:first-child:not(.on) { display: none; }

/* image viewer */
dialog { border: 0; padding: 0; background: #fff; width: 100%; height: 100%; max-width: none; max-height: none; box-sizing: border-box; }
dialog[open] { display: flex; flex-direction: column; }
.view { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 8px; }
.view img { max-height: 100%; width: auto; object-fit: contain; }
.view iframe { width: min(100%, 900px); aspect-ratio: 16 / 9; margin: 0; }
.bar { display: flex; gap: 3ch; padding: 8px; font: 13px monospace; flex-wrap: wrap; }
.bar .cap { flex: 1; min-width: 12ch; }

/* simulations */
.viewer { width: 100%; height: 75vh; height: 75dvh; background: #fff; touch-action: none; }
.tools { display: flex; gap: 2ch; font: 13px monospace; padding: 6px 0; }
.tools button { text-decoration: underline; color: #00e; }

#canvas { display: block; width: 640px; max-width: 100%; aspect-ratio: 8 / 5; height: auto; }

@media (max-width: 720px) {
  th:first-child, td:first-child { padding-left: 0; white-space: normal; }
  thead th:last-child { display: none; }
  tr { display: grid; grid-template-columns: 1fr auto; padding-bottom: 6px; }
  td:last-child { grid-column: 1 / -1; padding-left: 2ch; }
  td:last-child::before { content: ""; }
  .sub td:first-child { padding-left: 2ch; }
  .sub td:last-child { padding-left: 4ch; }
  thead tr { padding: 0; }
  th, td:nth-child(2) { padding-right: 0; }
  .viewer { height: auto; aspect-ratio: 1; }
}