@import url("https://rsms.me/inter/inter.css");
body { background: black; color: ivory; margin: 0 }
body { font: 16px/26px inter, helvetica, "dm mono", inconsolata, monospace; }

body, wisp-frame {
  top: 0; bottom: 0; left: 0; right: 0;
}

wisp-frame {
  display: grid;
  grid-template-rows: 2fr fit-content(50%);
  grid-template-columns: 100%;
  justify-content: center;
  position: absolute;
  background: #111;
  /* background: url(bg2.jpg); */
  /* background-size: cover; */
  overflow: auto;
}

wisp-window-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 32rem));
  grid-template-rows: repeat(3, 1fr);
  justify-content: center;
  overflow: auto;
}

@media (min-width: 768px) {
  wisp-window-grid {
    padding: 5px 10px;
    gap: 10px;
  }
}

wisp-window-grid > :nth-child(1) {
  grid-row: 1 / -1;
}

wisp-window-grid > :nth-child(1) ~ * {
  grid-column: 2;
}

wisp-echo-area {
  background: #0006;
  padding: 5px 10px;
}

wisp-window {
  display: grid;
  grid-template-rows: min-content minmax(0, 1fr);
  /* border-radius: 6px; */
  overflow: auto;
  scrollbar-width: none;
  border: 2px solid #0445;
}

wisp-window > main { grid-row: 2; }

wisp-window:not(.active) {
  border-color: transparent;
}

wisp-window > header {
  border-bottom: 2px solid #0445;
  padding: 0px 15px;
  color: ivory;
  font-size: 80%;
}

wisp-window > main {
  padding: 10px;
  padding-bottom: 50px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  height: 100%;
  background: #000;
  scrollbar-width: none;
}

wisp-window:not(.output) .symbol { text-transform: lowercase; }
wisp-window:not(.active) { opacity: 0.7; }

wisp-window:not(.active) .cursor { opacity: 0.3; }

.cursor { color: #ffa; }
.cursor { display: inline-flex; flex-wrap: wrap; }
.cursor { align-items: center; gap: 5px; }
.cursor { opacity: 0.6; }
.active .cursor { opacity: 1; }

.cursor:empty:before { content: '»'; }

.cursor:not(:empty) {
  margin: 0 5px;
  padding: 2px 5px;
  border-radius: 5px;
}

ins { text-decoration: none; }

::-webkit-scrollbar { display: none; }

.string:before { content: '“'; }
.string:after { content: '”'; }
.string { color: lightgray; }

.list > [data-function-kind=jet]:first-child,
.list > .cursor:first-child + [data-function-kind=jet],
.list > aside:first-child + [data-function-kind=jet],
{ color: goldenrod; }

.list > .cursor:first-child + [data-function-kind=fun],
.list > aside:first-child + [data-function-kind=fun],
.list > [data-function-kind=fun]:first-child { color: lightsalmon; }

.vector, .list {
  display: flex;
  flex-wrap: wrap;
  column-gap: 6px;
  /* row-gap: 5px; */
  margin: 0 0rem;
  padding: 0 6px;
  /* max-width: 60ch; */
  /* min-height: 1em; */
  align-items: center;
}

.list[data-callee='WISP:BACKQUOTE'] > .list { background: #88f3; }
.list[data-callee='WISP:UNQUOTE'] { background: #0006; }
.list[data-callee='WISP:UNQUOTE-SPLICING'] { background: #0006; }

.list[data-callee='WISP:BACKQUOTE'],
.list[data-callee='WISP:UNQUOTE'],
.list[data-callee='WISP:QUOTE'],
.list[data-callee='WISP:UNQUOTE-SPLICING'] {
  border: 0; column-gap: 0; margin-left: 0; flex-wrap: nowrap; align-items: start }

.list[data-callee="WISP:BACKQUOTE"] > [data-symbol-name=BACKQUOTE] > *,
.list[data-callee="WISP:UNQUOTE"] > [data-symbol-name=UNQUOTE] > *,
.list[data-callee="WISP:QUOTE"] > [data-symbol-name=QUOTE] > *,
.list[data-callee="WISP:UNQUOTE-SPLICING"] > [data-symbol-name=UNQUOTE-SPLICING] > *
{ display: none; }

.list[data-callee="WISP:BACKQUOTE"] > [data-symbol-name=BACKQUOTE]:before {
  content: "`"; font-weight: bold; padding-right : 4px }
.list[data-callee="WISP:UNQUOTE"] > [data-symbol-name=UNQUOTE]:before {
  content: ","; font-weight: bold; padding-right : 4px }
.list[data-callee="WISP:QUOTE"] > [data-symbol-name=QUOTE]:before {
  content: "’"; font-weight: bold; padding-right : 6px }
.list[data-callee="WISP:UNQUOTE-SPLICING"] > [data-symbol-name=UNQUOTE-SPLICING]:before {
  content: ",@"; padding-right : 4px }

.list[data-callee='WISP:COND'] > :not(.cursor),
.list[data-callee='WISP:MAKE-KEYMAP'] > :not(.cursor) {
  width: 100%;
}

.list[data-callee='WISP:DEFUN'] > div:first-of-type ~ *,
.list[data-callee='WISP:NOTE'] > div:first-of-type ~ *,
.list[data-callee='WISP:SET-KEYMAP!'] > :first-of-type ~ *,
.list[data-callee='KEYWORD:SECTION'] > div:first-of-type ~ *
{
  width: 100%;
}

.list[data-callee='KEYWORD:SECTION'] > div:first-of-type ~ :not(.cursor):not(:last-child) {
  margin-bottom: 10px;
}


.symbol[data-package-name=WISP] > .package-name { display: none; }
.symbol[data-package-name=KEYWORD] > .package-name { display: none; }

.package-name:after,
.symbol[data-package-name=KEYWORD] > .symbol-name:before {
  content: ":";
  opacity: 0.7;
  padding-right: 1px;
}

.list {
  border: 0 solid #555c;
  border-width: 0 1.25px;
  border-radius: 8px;
}

.list:hover {
  /* background: #fff1; */
  border-color: #fff7;
  cursor: pointer;
}

.symbol:hover, .string:hover {
  font-weight: bold;
  cursor: pointer;
}

.vector {
  border: 0 solid #556a;
  border-width: 1px 3px;
  border-radius: 10px;
  padding: 5px;
  min-width: 1em;
  min-height: 26px;
}

@keyframes blink {
  0%, 100% { color: #ffa8 } 50% { color: #ffaa }
}

@keyframes rock {
  0% { transform: rotate(-15deg) }
  50% { transform: rotate(15deg) }
  100% { transform: rotate(-15deg) }
}

main > * { flex-shrink: 0; }

.list > aside {
  opacity: 0.5;
  font-weight: 100;
}

.list[data-callee="WISP:PENDING-PROMISE"] > * {
  display: none;
}

.list[data-callee="WISP:PENDING-PROMISE"]:before {
  display: block;
  content: "☐";
  animation: blink 1s infinite;
  transform: scale(1.25);
}

.list[data-callee="WISP:RESOLVED-PROMISE"] > [data-symbol-name="RESOLVED-PROMISE"] > * {
  display: none;
}

.list[data-callee="WISP:RESOLVED-PROMISE"] > [data-symbol-name="RESOLVED-PROMISE"]:before {
  display: block;
  content: "☑";
  color: limegreen;
  transform: scale(1.25);
}

/* .list */
/* { border-color: hsl(260, 5%, 60%, .7) } */
/* .list .list */
/* { border-color: hsl(200, 55%, 50%, .7) } */
/* .list .list .list */
/* { border-color: hsl(180, 85%, 50%, .7) } */
/* .list .list .list .list */
/* { border-color: hsl(170, 85%, 30%, .7) } */
/* .list .list .list .list .list */
/* { border-color: hsl(140, 85%, 30%, .7) } */
/* .list .list .list .list .list .list */
/* { border-color: hsl(80, 85%, 30%, .7) } */
/* .list .list .list .list .list .list .list */
/* { border-color: hsl(0, 85%, 30%, .7) } */
/* .list .list .list .list .list .list .list .list */
/* { border-color: hsl(260, 55%, 60%, .7) } */
/* .list .list .list .list .list .list .list .list .list */
/* { border-color: hsl(200, 55%, 50%, .7) } */
/* .list .list .list .list .list .list .list .list .list .list */
/* { border-color: hsl(180, 85%, 50%, .7) } */
/* .list .list .list .list .list .list .list .list .list .list .list */
/* { border-color: hsl(170, 85%, 30%, .7) } */
/* .list .list .list .list .list .list .list .list .list .list .list .list */
/* { border-color: hsl(140, 85%, 30%, .7) } */
/* .list .list .list .list .list .list .list .list .list .list .list .list .list */
/* { border-color: hsl(80, 85%, 30%, .7) } */
/* .list .list .list .list .list .list .list .list .list .list .list .list .list .list */
/* { border-color: hsl(0, 85%, 30%, .7) } */

.output > header { display: none; }