/* gout's web preview: a terminal in a page. Colours of roles and cells come from theme.css,
   which the server writes from color.json's defaults. */
:root {
  --bg: #121212;
  --bg-2: #1b1b1b;
  --fg: #d0d0d0;
  --dim: #8a8a8a;
  --line: #303030;
  --accent: #f5c242;
  --danger: #ff5f5f;
  --mono: "DejaVu Sans Mono", "Menlo", "SF Mono", "Cascadia Mono", "Consolas", "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); }
body { font: 14px/1.3 var(--mono); }
[hidden] { display: none !important; }
button, input { font: inherit; color: inherit; }
pre { margin: 0; font: inherit; white-space: pre; }
.dim { color: var(--dim); }

#app { display: flex; flex-direction: column; min-height: 100vh; padding: 0 16px; }
.bar { display: flex; justify-content: space-between; white-space: pre; overflow: hidden; min-height: 1.3em; flex: none; }
#app > header { margin: 0 -16px; padding: 0 16px; }

/* the two panes, as the terminal ui splits them */
#panes { flex: 1 1 auto; display: grid; grid-template-columns: minmax(28ch, 42%) 1fr; gap: 0 1ch;
         height: calc(100vh - 17rem); min-height: 22rem; }
#left, #right { min-width: 0; min-height: 0; }
#left { border-right: 1px solid var(--line); padding-right: 1ch; }
#scroll { height: 100%; overflow-y: auto; overflow-x: hidden; padding-top: .2em; }
#log div { white-space: pre-wrap; overflow-wrap: anywhere; min-height: 1.3em; }
#promptline { display: flex; align-items: baseline; }
#prompt { white-space: pre; }
#line { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; padding: 0; caret-color: var(--accent);
        font-weight: bold; }
#busy { color: var(--dim); }

#right { display: flex; flex-direction: column; overflow: hidden; }
#timeline-box, #panel-box { flex: none; }
#timeline, #panel { overflow-x: auto; overflow-y: hidden; padding: .15em 0 .3em; }
#cheat-box { flex: 1 1 auto; min-height: 6em; display: flex; flex-direction: column; }
#cheat { flex: 1; overflow: auto; padding: .15em 0 .3em 1ch; }

/* files, and keeping them */
#files { flex: none; border-top: 1px solid var(--line); padding: .6em 0; display: grid; gap: .5em; }
#file-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5em 1em; }
#file-list { display: contents; list-style: none; margin: 0; padding: 0; }
#file-list li { display: inline-flex; align-items: center; gap: .4em; background: var(--bg-2);
                border: 1px solid var(--line); border-radius: 3px; padding: .1em .2em .1em .5em; max-width: 100%; }
#file-list .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 24ch; }
#file-list .size { color: var(--dim); }
#file-list .remove { background: none; border: 0; color: var(--dim); cursor: pointer; padding: 0 .35em; font-size: 1.05em; }
#file-list .remove:hover, #file-list .remove:focus-visible { color: var(--danger); }
#file-list li.pending { color: var(--dim); border-style: dashed; }
#upload { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
#keep { display: flex; flex-wrap: wrap; gap: .5em 1.5em; align-items: center; justify-content: space-between; }
#warning { margin: 0; max-width: 88ch; color: var(--dim); }
#warning strong { color: var(--accent); font-weight: bold; }
.actions { display: flex; flex-wrap: wrap; gap: .5em; }

.button { display: inline-block; background: var(--bg-2); border: 1px solid #4a4a4a; border-radius: 3px;
          padding: .25em .8em; cursor: pointer; text-decoration: none; white-space: nowrap; }
.button:hover, .button:focus-visible { border-color: var(--accent); color: #fff; outline: none; }
.button.quiet { border-color: var(--line); color: var(--dim); }
.button.quiet:hover { border-color: var(--danger); color: var(--danger); }
.button[disabled] { opacity: .5; cursor: default; }
label.button:focus-within { border-color: var(--accent); }

/* the footer: the big play and the downloads */
footer { flex: none; border-top: 1px solid var(--line); padding: 1em 0 1.4em; display: flex; flex-wrap: wrap;
         gap: 1em 2.5em; align-items: center; }
#big-play { background: var(--accent); color: #111; border: 0; border-radius: 6px; padding: .45em 1.6em;
            font-size: 1.6rem; font-weight: bold; cursor: pointer; letter-spacing: .05em; }
#big-play:hover, #big-play:focus-visible { background: #ffd75f; outline: 2px solid #fff3; outline-offset: 3px; }
#big-play .triangle { display: inline-block; transform: translateY(-.03em); }
#downloads { display: grid; gap: .45em; flex: 1 1 32ch; }
#downloads .buttons { display: flex; flex-wrap: wrap; gap: .5em; }
.button.os.mine { border-color: var(--accent); }
#download-help { background: var(--bg-2); border: 1px solid var(--line); border-radius: 3px; padding: .6em .8em;
                 max-width: 80ch; }
#download-help p { margin: .2em 0; }
#download-help .head { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; }
#download-help .close { background: none; border: 0; color: var(--dim); cursor: pointer; font-size: 1.1em;
                        padding: 0 .3em; line-height: 1; }
#download-help .close:hover, #download-help .close:focus-visible { color: var(--accent); outline: none; }
#download-help .files { display: flex; flex-wrap: wrap; gap: .5em; margin: .5em 0; }
#download-help ol { margin: .4em 0; padding-left: 2.2ch; }
#download-help li { margin: .15em 0; }
#download-help a:not(.button) { color: var(--accent); }

/* the full-screen fractal */
#screen { position: fixed; inset: 0; background: #000; z-index: 10; }
#fractal { position: absolute; inset: 0; width: 100%; height: 100%; }
#screen-status { position: absolute; left: 0; right: 0; bottom: 0; white-space: pre; overflow: hidden; padding: 0 1ch; }

#drop { position: fixed; inset: 0; z-index: 20; background: #000c; display: grid; place-items: center;
        border: 3px dashed var(--accent); font-size: 1.4rem; }

@media (max-width: 760px) {
  #panes { grid-template-columns: 1fr; height: auto; }
  #left { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--line); }
  #scroll { height: 45vh; }
  #right { overflow: visible; }
  #cheat { max-height: 40vh; }
  #big-play { width: 100%; }
}