@import url("https://rsms.me/inter/inter.css");

:root {
  color-scheme: dark;
  --ground: #111;
  --panel: #000;
  --chrome: #191919;
  --line: #404040;
  --text: ivory;
  --muted: #aaa;
  --focus: #ffa;
  --file: #d5785c;
  --listener: #73aaa0;
  --condition: #dc7565;
}

* {
  box-sizing: border-box;
}

em,
i,
.cm-completionDetail {
  font-style: normal !important;
}

html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  color: var(--text);
  background: var(--ground);
  font: 16px/26px inter, helvetica, "dm mono", inconsolata,
    monospace;
}

wisp-frame {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  background: var(--ground);
  overflow: hidden;
}

wisp-window-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(30rem, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 6px;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 6px;
  overflow-x: auto;
  overflow-y: hidden;
}

@media (max-width: 760px) {
  wisp-window-grid {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-auto-rows: minmax(16rem, 1fr);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

wisp-echo-area {
  display: grid;
  grid-template-columns: minmax(2rem, 1fr) auto;
  align-items: center;
  min-width: 0;
  min-height: 31px;
  padding: 2px 8px;
  color: var(--muted);
  background: #080808;
  border-top: 1px solid #333;
}

wisp-echo-area.active {
  color: var(--text);
  border-top-color: #777;
}

wisp-echo-area > main {
  min-width: 0;
}

.command-hints {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  overflow-x: auto;
  font: 11px/20px ui-monospace, SFMono-Regular, Menlo,
    monospace;
  white-space: nowrap;
  scrollbar-width: none;
}

.mode-name {
  color: var(--listener);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.command-hint {
  display: inline-flex;
  gap: 5px;
}

.command-hint kbd {
  color: #d7ded9;
  font: inherit;
  font-weight: 700;
}

@media (max-width: 760px) {
  wisp-echo-area {
    grid-template-columns: minmax(0, 1fr);
  }

  wisp-echo-area > main:has(.cursor:empty) {
    display: none;
  }

  .command-hints {
    gap: 11px;
  }
}

wisp-window {
  --pane-color: var(--line);
  display: grid;
  grid-template-rows: min-content minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  scrollbar-width: none;
  background: var(--panel);
  border: 1px solid #333;
}

wisp-window.file { --pane-color: var(--file); }
wisp-window.output { --pane-color: var(--listener); }

wisp-window > header {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 27px;
  padding: 0 8px;
  color: var(--muted);
  background: var(--chrome);
  border-bottom: 1px solid #333;
  font: 12px/20px ui-monospace, SFMono-Regular, Menlo,
    monospace;
  cursor: pointer;
  user-select: none;
}

wisp-window > header:before {
  width: 8px;
  height: 8px;
  content: "";
  background: var(--pane-color);
}

wisp-window.active {
  border-color: var(--pane-color);
}

wisp-window.active > header {
  color: var(--text);
  background: color-mix(in srgb, var(--pane-color) 28%, #111);
  border-bottom-color: var(--pane-color);
}

wisp-window.active > header:before {
  background: var(--focus);
}

.window-title {
  color: inherit;
  font-weight: 700;
}

.window-kind {
  margin-left: auto;
  color: var(--muted);
}

.window-action {
  min-width: 0;
  padding: 0 6px;
  color: var(--listener);
  background: transparent;
  border: 1px solid color-mix(
    in srgb,
    var(--listener) 55%,
    #222
  );
  border-radius: 0;
  font: inherit;
  line-height: 18px;
  cursor: pointer;
}

.window-action:hover,
.window-action:focus {
  color: #08110f;
  background: var(--listener);
  outline: none;
}

wisp-window > main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 10px 10px 50px;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--panel);
  scrollbar-width: none;
}

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

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

.cursor {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  color: var(--focus);
  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;
  margin: 0 0rem;
  padding: 0 6px;
  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;
}

.wisp-widget {
  appearance: none;
  min-width: 0;
  height: 25px;
  margin: 1px 0;
  padding: 1px 7px;
  color: #d6e6e1;
  background: #09110f;
  border: 1px solid #42655e;
  border-radius: 0;
  font: 12px/21px ui-monospace, SFMono-Regular, Menlo,
    monospace;
}

.wisp-button {
  cursor: pointer;
}

.wisp-button:hover,
.wisp-button:focus,
.wisp-button.selected {
  color: #08110f;
  background: var(--listener);
  border-color: #a9e1d5;
  outline: none;
}

.wisp-input {
  flex: 1 1 14rem;
  width: min(22rem, 100%);
  color: var(--text);
  background: #020504;
}

.wisp-input:focus {
  border-color: var(--focus);
  outline: 1px solid var(--focus);
  outline-offset: -3px;
}

.list[data-callee='WISP:SYSTEM-BROWSER'] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0;
  width: 100%;
  padding: 0;
  align-items: start;
  background: #020403;
  border: 1px solid #42655e;
  border-radius: 0;
}

.list[data-callee='WISP:SYSTEM-BROWSER']
  > .symbol:first-child {
  min-height: 27px;
  padding: 3px 8px;
  color: var(--listener);
  background: #0d1513;
  border-bottom: 1px solid #42655e;
  font: 700 11px/17px ui-monospace, SFMono-Regular, Menlo,
    monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.list[data-callee='WISP:SYSTEM-BROWSER'] > .list {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 5px 7px;
  padding: 2px 6px;
  align-content: flex-start;
  background: transparent;
  border-color: #60706c80;
}

.list[data-callee='WISP:SYSTEM-BROWSER']
  > .list[data-callee='WISP:PACKAGE'] {
  row-gap: 3px;
}

.list[data-callee='WISP:SYSTEM-BROWSER']
  > .list[data-callee='WISP:PACKAGE']
  > .wisp-input {
  flex: 1 0 100%;
  width: 100%;
}

.list[data-callee='WISP:SYSTEM-BROWSER']
  > .list[data-callee='WISP:STATUS'] {
  margin-top: 7px;
  color: #8f9b97;
  border-color: #43504d60;
  font: 10px/17px ui-monospace, SFMono-Regular, Menlo,
    monospace;
}

.list[data-callee='WISP:SYSTEM-BROWSER']
  > .wisp-button:last-child {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  margin-right: 5px;
}

.list:hover {
  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 }
}

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);
}

.wisp-debugger {
  display: grid;
  color: ivory;
  background: #000;
  border: 1px solid var(--condition);
}

.debugger-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-height: 27px;
  padding: 0 8px;
  background: color-mix(in srgb, var(--condition) 25%, #111);
  border-bottom: 1px solid var(--condition);
}

.debugger-kicker,
.debugger-context-title {
  color: #ddd;
  font: 700 11px/20px ui-monospace, SFMono-Regular, Menlo,
    monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.debugger-name {
  color: #ffae9f;
  font: 700 14px/20px ui-monospace, SFMono-Regular, Menlo,
    monospace;
}

.debugger-ticket {
  margin-left: auto;
  color: #d8b7b1;
  font: 11px/20px ui-monospace, SFMono-Regular, Menlo,
    monospace;
}

.debugger-condition {
  padding: 9px 8px 8px;
}

.debugger-restarts {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 0 8px 8px;
}

.restart {
  appearance: none;
  margin: 0 -1px 0 0;
  padding: 3px 8px;
  color: #d9eee7;
  background: #12211e;
  border: 1px solid #497f73;
  border-radius: 0;
  font: 12px/20px ui-monospace, SFMono-Regular, Menlo,
    monospace;
  cursor: pointer;
}

.restart:hover,
.restart:focus {
  color: #07110e;
  background: #8bc7b8;
  outline: 1px solid #c6fff0;
  outline-offset: -2px;
}

.restart:last-child {
  color: #ffd1c8;
  background: #2b1512;
  border-color: #87483d;
}

.debugger-context {
  border-top: 1px solid #4a302d;
}

.debugger-context > summary {
  padding: 2px 8px;
  color: #ccc;
  background: #141414;
  cursor: pointer;
}

.debugger-context > .list {
  margin: 8px;
  padding: 4px 6px;
  border-color: #7778;
}