@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: normal;
  src: url('fonts/FiraCode-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: bold;
  src: url('fonts/FiraCode-Bold.woff2') format('woff2');
}

@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: normal;
  src: url(https://fonts.gstatic.com/s/karla/v14/qkBIXvYC6trAT55ZBi1ueQVIjQTD-JqaE0lK.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Helvetica Neue';
  font-style: normal;
  font-weight: normal;
  src: url('fonts/HelveticaNeue-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Helvetica Neue';
  font-style: normal;
  font-weight: bold;
  src: url('fonts/HelveticaNeue-Bold.woff2') format('woff2');
}

@font-face{
  font-family: 'Source Code Pro';
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  src: url('fonts/SourceCodePro-Regular.otf.woff2') format('woff2');
}

@font-face{
  font-family: 'Source Code Pro';
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  src: url('fonts/SourceCodePro-Bold.otf.woff2') format('woff2');
}

@font-face{
  font-family: 'Source Code Pro';
  font-weight: 900;
  font-style: normal;
  font-stretch: normal;
  src: url('fonts/SourceCodePro-Black.otf.woff2') format('woff2');
}

:root {
  --light-page-color: #fdf6e3;
  --light-text-color: #586e75;
  --top_bar_icon_fill: #c7b480;
  --top-bar-text: #a79f89;
  --delim-color: #586e75; /*#aeb5b8;*/ /*#657b83;*/

  --selection-color: #fae294;
  --selection-shadow-color: rosybrown;

  --hole-stroke-color: #dc322f;

  --exp-bg-color: #ebdfc5; /*#dbf6de;*/
  --exp-shadow-color: #c4b599;/*#329f43;*/
  --exp-rail-color: #a7d3ad;

  --pat-bg-color: #f5fbff;
  --pat-shadow-color: #90bdde; /*#268bd2;*/
  --pat-rail-color: #a1c4dd;

  --typ-bg-color: #caccf4;
  --typ-shadow-color: #6168d4;

  --rul-bg-color: #f3caf4;
  --rul-shadow-color: #d461d0;

  --nul-bg-color: #b6b6b6;
  --nul-shadow-color: #a97804;

  --unsorted-bg-color: #ffd0e6;
  --unsorted-shadow-color: #c2a964;
  --unsorted-rail-color: #e7bdd0;

  --bar-color: #dfdacc;

  --key-bg-color: var(--light-text-color);
  --key-text-color: whitesmoke;
  --action-text-color:  var(--light-text-color);

  --err-flash-duration: 0.4s;
  --err-msg-duration: 5s;

  --disabled-action-table-opacity: 0.25;

  --line-height: 1.45;

  --selection-box-z: 1;
  --genie-z: 1;
  --empty-hole-z: 5;
  --tile-z: 4;
  --code-text-z: 6;
  --code-text-shards-z: 7;
  --bar-z: 0;
  --inner-cousin-z: 9;
  --outer-cousin-caret-position-z: 9;
  --rail-z: 11;
  --selection-bar-z: 12;
  --caret-position-z: 13;
  --anchor-z: 14;
  --current-caret-pos-z: 15;
  --caret-z: 14;
  --action-table-z: 15;
  --caret-bar-z: 16;
  --error-message-z: 17;
}

#page {
  overflow-x: auto;
  overflow-y: auto;
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0%;
  left: 0%;
  background-color: var(--light-page-color);
  color: var(--light-text-color);
}

#top-bar {
  position: fixed;
  box-sizing: border-box;
  width: 100vw;
  padding: 0.8em;
  display: flex;
  justify-content: space-between;
}

#editor-id {
  color: var(--top-bar-text);
  display: flex;
  gap: 0.5em;
  cursor: pointer;
  user-select: none;
  font-family: "Helvetica Neue";
}

#logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
#logo-text {
  position: relative;
  vertical-align: middle;
  z-index: var(--code-text-z);
  /* deviate from font-specimen as hack to vertically center */
  line-height: 1.7;
}

#font-specimen, #logo-font-specimen {
  position: fixed;
  left: 100%;
}

#logo-font-specimen, #logo {
  font-family: "Fira Code", monospace;
  font-weight: bold;
  font-size: 16pt;
}
#font-specimen, #code-container {
  line-height: var(--line-height);
  font-family: "Source Code Pro", monospace;
  font-weight: normal;
  font-size: 13pt;
}

#code-container {
  padding: 1em 6em 6em 6em;
}
#code-container:focus {
  outline: none;
}

@media screen and (min-height: 800px) {
  #code-container {
    top: max(min(30%, 100vh - 350px), 64px);
  }
}

#bar {
  z-index: var(--bar-z);
  position: absolute;
  left: 0;
  width: 100%;
}
#bar svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
#bar rect {
  fill: var(--bar-color);
}

#history-button-container {
    display: flex;
    gap: 1em;
}

.history-button {
  font: 14pt 'Helvetica Neue';
  font-weight: bold;
}
.history-button.disabled {
  opacity: 0.35;
}
.history-button path {
  fill: var(--top_bar_icon_fill);
  stroke-width: 2px;
}
.history-button:hover {
  cursor: pointer;
}
.history-button.disabled:hover {
  cursor: default;
}
.history-button:hover svg {
  transform: scale(110%);
}
.history-button.disabled:hover svg {
  transform: none;
}
.history-button:active svg {
  transform: scale(100%);
}
.history-button.disabled:active svg {
  transform: scale(100%);
}
.history-button:hover path {
  fill: var(--action-text-color);
}
.history-button.disabled:hover path {
  fill: var(--light-text-color);
}

.code {
  position: relative;
  line-height: var(--line-height);
  white-space: nowrap
}

.code-text {
  position: absolute;
  z-index: var(--code-text-z);
}

/* TODO(andrew): refactor to make this unnecessary */
.backpack .code-text {
  position: relative;
}

/* NOTE(andrew): below 3 styles are part of
   a hack to display incomplete delims in
   selections */
.code-text-shards {
  position: absolute;
  z-index: var(--code-text-shards-z);
}
.code-text-shards span {
  color: #0000 !important;
}
.code-text-shards span.delim-incomplete {
  color: #ce9600 !important;
}

.empty-hole {
  z-index: var(--empty-hole-z);
}
.empty-hole-path {
  fill: #f1e8cd;
  stroke: #dbcca7;
  stroke-width: 0.75px;
  vector-effect: non-scaling-stroke;
}

.selection {
  position: relative;
}
.selection-box {
  position: absolute;
  z-index: var(--selection-box-z);
  box-sizing: border-box;
  background-color: transparent;
  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: 3px;
}
.selection-box.unfocused {
  opacity: 50%;
}
.selection-box.moving {
  box-shadow: 0.5px 0.5px 2px var(--selection-shadow-color);
}
.restructuring {
  position: relative;
}
.placeholder {
  position: absolute;
}
.placeholder-mask {
  position: absolute;
  z-index: var(--placeholder-z);
  background-color: lightgray;
  box-sizing: border-box;
  box-shadow: inset 1px 1px 2px darkgray;
  border-radius: 4px;
}

.tile-indicated {
  z-index: var(--tile-z);
}

.anchor-container {
  z-index: var(--anchor-z);
}
.current-caret-pos-container {
  z-index: var(--current-caret-pos-z);
}
.sibling{
  z-index: var(--caret-position-z);
}
.inner-cousin-container {
  z-index: var(--inner-cousin-z);
}
.outer-cousin-container {
  z-index: var(--outer-cousin-caret-position-z);
}

.restructuring-genie-path {
  stroke-width: 0;
  fill: var(--selection-color);
  vector-effect: non-scaling-stroke;
}

.child-line {
  stroke-width: 1;
  fill: none;
  vector-effect: non-scaling-stroke;
}
.child-line.Exp {
  stroke: var(--exp-shadow-color);
}
.child-line.Pat {
  stroke: var(--pat-shadow-color);
}


/*TODO(andrew): clean up text classes*/
.code .text-Pat {
  color: #236eac;
}
.code .text-Exp {
  color: #576d75;
}
.code .delim {
  color: var(--delim-color);
  font-weight: bold;
}
.code .delim-incomplete {
  color: #ce9600;
  font-weight: bold;
}
.code .mono-sort-inconsistent {
  color: red;
}
.code .delim-sort-inconsistent {
  color: red;
  font-weight: bold;
}

/*.tile-path {
  stroke-width: 0.4;
  fill-rule: evenodd;
  fill: var(--nul-bg-color);
}*/

.tile-path.selected {
  fill: var(--selection-color);
}

.tile-path.unsorted {
  stroke: var(--unsorted-shadow-color);
  filter: url(#drop-shadow-unsorted);
}
.tile-path.unsorted.indicated {
  fill: var(--unsorted-bg-color);
}
.tile-path.unsorted.raised {
  filter: url(#raised-drop-shadow-unsorted);
}
#drop-shadow-unsorted .tile-drop-shadow,
#raised-drop-shadow-unsorted .tile-drop-shadow {
  flood-color: var(--unsorted-shadow-color);
}


/* TODO(andrew): hack important */
.tile-path.raised.selected {
  filter: url(#raised-drop-shadow-Nul) !important;
}

.tile-path.Exp {
  /*stroke: var(--exp-shadow-color);*/
  filter: url(#drop-shadow-Exp);
}

.tile-path.Any.indicated {
  fill: #f0dead;
}
.tile-path.Any.indicated-caret {
  fill: #f0dead;
}
.tile-path.Any.raised {
  filter: url(#raised-drop-shadow-Any);
}
#drop-shadow-Any .tile-drop-shadow,
#raised-drop-shadow-Any .tile-drop-shadow {
  flood-color: var(--any-shadow-color);
}

.tile-path.Exp.indicated {
  fill: var(--exp-bg-color);
  /*fill:#b9e3be;*/
}
.tile-path.Exp.indicated-caret {
  fill: #feddb3;
  /*fill:#b9e3be;*/
}
.Exp.indicated-child {
  fill: #f9eed8;
}
.child-backing {
  z-index: -1;
}


#drop-shadow-Exp .tile-drop-shadow,
#raised-drop-shadow-Exp .tile-drop-shadow {
  flood-color: var(--exp-shadow-color);
}

.tile-path.Pat {
  /*stroke: var(--pat-shadow-color);*/
  filter: url(#drop-shadow-Pat);
}
.tile-path.Pat.indicated {
  fill: var(--pat-bg-color);
}
.tile-path.Pat.indicated-caret {
  fill: #c4e6ff;
}
.Pat.indicated-child {
  fill: #e4f1fa;
}
.tile-path.Pat.raised {
  filter: url(#raised-drop-shadow-Pat);
}
#drop-shadow-Pat .tile-drop-shadow,
#raised-drop-shadow-Pat .tile-drop-shadow {
  flood-color: var(--pat-shadow-color);
}

.tile-path.Typ {
  /*stroke: var(--typ-shadow-color);*/
  filter: url(#drop-shadow-Typ);
}
.tile-path.Typ.indicated {
  fill: var(--typ-bg-color);
}
.tile-path.Typ.raised {
  filter: url(#raised-drop-shadow-Typ);
}
#drop-shadow-Typ .tile-drop-shadow,
#raised-drop-shadow-Typ .tile-drop-shadow {
  flood-color: var(--typ-shadow-color);
}

.tile-path.Rul {
  filter: url(#drop-shadow-Rul);
}
.tile-path.Rul.indicated {
  fill: var(--rul-bg-color);
}
.tile-path.Rul.raised {
  filter: url(#raised-drop-shadow-Rul);
}
#drop-shadow-Rul .tile-drop-shadow,
#raised-drop-shadow-Rul .tile-drop-shadow {
  flood-color: var(--rul-shadow-color);
}

.tile-path.Nul {
  filter: url(#drop-shadow-Nul);
}
.tile-path.Nul.indicated {
  fill: var(--nul-bg-color);
}
.tile-path.Nul.raised {
  filter: url(#raised-drop-shadow-Nul);
}
#drop-shadow-Nul .tile-drop-shadow,
#raised-drop-shadow-Nul .tile-drop-shadow {
  flood-color: var(--nul-shadow-color);
}

.caret-position-path {
  vector-effect: non-scaling-stroke;
  stroke-width: 0.1px;
}

.caret-position-path.outer-cousin {
  stroke: var(--bar-color);
  fill: var(--bar-color);
}

.caret-position-path.Exp.sibling {
  stroke: var(--exp-rail-color);
  fill: var(--exp-rail-color);
}

.caret-position-path.Exp.inner-cousin {
  stroke: var(--exp-rail-color);
  fill: var(--exp-rail-color);
}

.caret-position-path.Pat.sibling,
.caret-position-path.Pat.inner-cousin {
  stroke: var(--pat-rail-color);
  fill: var(--pat-rail-color);
}

.caret-position-path.Exp.anchor,
.caret-position-path.Exp.current-caret-pos {
  stroke: var(--exp-shadow-color);
  fill: var(--exp-shadow-color);
}
.caret-position-path.Pat.anchor,
.caret-position-path.Pat.current-caret-pos {
  stroke: var(--pat-shadow-color);
  fill: var(--pat-shadow-color);
}
.caret-position-path.Typ.anchor,
.caret-position-path.Typ.current-caret-pos {
  stroke: var(--typ-shadow-color);
  fill: var(--typ-shadow-color);
}
.caret-position-path.unsorted,
.caret-position-path.unsorted.current-caret-pos {
  stroke: var(--unsorted-shadow-color);
  fill: var(--unsorted-shadow-color);
}

.caret-position-path.Exp.current-caret-pos.just-failed-0 {
  animation: failedexppos0 var(--err-flash-duration);
}
.caret-position-path.Exp.current-caret-pos.just-failed-1 {
  animation: failedexppos1 var(--err-flash-duration);
}
.caret-position-path.Pat.current-caret-pos.just-failed-0 {
  animation: failedpatpos0 var(--err-flash-duration);
}
.caret-position-path.Pat.current-caret-pos.just-failed-1 {
  animation: failedpatpos1 var(--err-flash-duration);
}

@keyframes failedexppos0 {
  0% {
    stroke: var(--hole-stroke-color);
    fill: var(--hole-stroke-color);
  }
  100% {
    stroke: var(--exp-shadow-color);
    fill: var(--exp-shadow-color);
  }
}

@keyframes failedexppos1 {
  0% {
    stroke: var(--hole-stroke-color);
    fill: var(--hole-stroke-color);
  }
  100% {
    stroke: var(--exp-shadow-color);
    fill: var(--exp-shadow-color);
  }
}

@keyframes failedpatpos0 {
  0% {
    stroke: var(--hole-stroke-color);
    fill: var(--hole-stroke-color);
  }
  100% {
    stroke: var(--pat-shadow-color);
    fill: var(--pat-shadow-color);
  }
}
@keyframes failedpatpos1 {
  0% {
    stroke: var(--hole-stroke-color);
    fill: var(--hole-stroke-color);
  }
  100% {
    stroke: var(--pat-shadow-color);
    fill: var(--pat-shadow-color);
  }
}

@property --color {
  syntax: '<color>'; /* <- defined as type number for the transition to work */
  initial-value: #000000;
  inherits: false;
}
#caret-bar {
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  width: 2px;
  transform: translate(-50%, 0%);
  z-index: var(--caret-bar-z);
}
#caret-bar.Exp {
  background-color: var(--exp-shadow-color);
}
#caret-bar.Pat {
  background-color: var(--pat-shadow-color);
}
#caret-bar.Exp.just-failed-0 {
  animation: failedexpbar0 var(--err-flash-duration);
}
#caret-bar.Exp.just-failed-1 {
  animation: failedexpbar1 var(--err-flash-duration);
}
#caret-bar.Pat.just-failed-0 {
  animation: failedpatbar0 var(--err-flash-duration);
}
#caret-bar.Pat.just-failed-1 {
  animation: failedpatbar1 var(--err-flash-duration);
}

@keyframes failedexpbar0 {
  0% {
    background-color: var(--hole-stroke-color);
  }
  100% {
    background-color: var(--exp-shadow-color);
  }
}
@keyframes failedexpbar1 {
  0% {
    background-color: var(--hole-stroke-color);
  }
  100% {
    background-color: var(--exp-shadow-color);
  }
}

@keyframes failedpatbar0 {
  0% {
    background-color: var(--hole-stroke-color);
  }
  100% {
    background-color: var(--pat-shadow-color);
  }
}
@keyframes failedpatbar1 {
  0% {
    background-color: var(--hole-stroke-color);
  }
  100% {
    background-color: var(--pat-shadow-color);
  }
}

#error-message {
  opacity: 0%;
  position: absolute;
  z-index: var(--error-message-z);
  color: var(--action-text-color);/*#cb4b16;*/
  font: 10pt "Helvetica Neue";
  /*font-weight: 500;*/
  white-space: nowrap;
}
#error-message.just-failed-0 {
  animation: failederrmsg0 var(--err-msg-duration);
}
#error-message.just-failed-1 {
  animation: failederrmsg1 var(--err-msg-duration);
}

@keyframes failederrmsg0 {
  0% {
    opacity: 100%;
  }
  80% {
    opacity: 100%;
  }
  100% {
    opacity: 0%;
  }
}
@keyframes failederrmsg1 {
  0% {
    opacity: 100%;
  }
  80% {
    opacity: 100%;
  }
  100% {
    opacity: 0%;
  }
}

#backpack-pre, #backpack-suf {
  position: absolute;
  display: grid;
  grid-auto-flow: column;
}
.restructuring-selection.unfocused {
  opacity: 0.6;
}

.sort-label {
  border-radius: 2px;
  font-weight: 600;
}
.sort-label.typ {
  background-color: var(--typ-bg-color);
}
.sort-label.pat {
  background-color: var(--pat-bg-color);
}
.sort-label.exp {
  background-color: var(--exp-bg-color);
}
.sort-label.Exp {
  /*color: var(--light-page-color);*/
  color: var(--exp-shadow-color);
}
.sort-label.Pat {
  /*color: var(--light-page-color);*/
  color: var(--pat-shadow-color);
}

#action-table {
  position: relative;
  left: -128px;
  top: min(100px, max(15%, 80px));
  font: 10pt "Helvetica Neue";
  display: grid;
  grid-template-columns: 120px auto;
  grid-template-rows: repeat(3, auto 24px) auto 4px auto 24px auto 4px repeat(6, auto 4px) auto; /*24px auto 4px auto;*/
  column-gap: 16px;
  color: var(--action-text-color);
  z-index: var(--action-table-z);
  display: none;
}

#action-table .keys-container {
  justify-self: right;
  align-self: center;
  width: 100%;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: auto;
  grid-auto-columns: min-content;
  justify-items: right;
  justify-content: right;
  grid-auto-flow: column;
}
#action-table .keys {
  box-shadow: 0 0 8px -2px var(--light-page-color);
  border-radius: 3px;
  display: grid;
  grid-template-rows: 1fr;
  grid-auto-flow: column;
  column-gap: 4px;
}
#action-table .keys.with-hyphen {
  column-gap: 2px;
}
#action-table .key {
  background-color: var(--key-bg-color);
  color: var(--key-text-color);
  border-radius: 3px;
  padding: 2px 4px;
  min-width: 12px;
  display: grid;
  justify-content: center;
  align-content: center;
  font-family: Karla;
}

#action-table .action-type {
  font-weight: bold;
  justify-self: left;
  align-self: center;
  white-space: nowrap;
}
.action-type.disabled,
.action-type .disabled {
  opacity: 0.5;
}

#action-table .construct-shape {
  justify-self: left;
  /* text-decoration-line: underline;
  text-decoration-thickness: 2px; */
  font-weight: normal;
}
#action-table .construct-shape.disabled {
  /* text-decoration: none; */
  opacity: 0.5;
}
.construct-shape-row {
  white-space: nowrap;
}
.construct-shape-row .disabled {
  opacity: 0.5;
}
#action-table.Exp .construct-shape {
  text-decoration-color: var(--exp-rail-color);
}
#action-table.Pat .construct-shape {
  text-decoration-color: var(--pat-rail-color);
}

.keyboard-arrow {
  position: relative;
  font-family: 'Fira Code';
  top: 1px;
}

.delete-action-arrow {
  font-family: 'Fira Code';
}

#about-button-container {
  display: flex;
  gap: 1em;
}

/* #help {
  position: absolute;
  top: 50%;
  right: max(16px, min(2%, 32px));
  transform: translate(0%, -50%);
} */
#help svg {
  fill: var(--top_bar_icon_fill);
}
#help:hover svg {
  transform: scale(120%);
}
#help:active svg {
  transform: scale(100%);
}

#github svg {
  fill: var(--top_bar_icon_fill);
}
#github:hover svg {
  transform: scale(120%);
}
#github:active  svg {
  transform: scale(100%);
}

.topbar-icon {
  color: var(--top_bar_icon_fill);
}
.topbar-icon:hover {
  transform: scale(120%);
  /*fill: #dca100;*/
}
.topbar-icon svg {
  fill: var(--top_bar_icon_fill);
}
.topbar-icon:hover svg {
  transform: scale(120%);
  /*fill: #dca100;*/
}

.whitespace {
  color:rgb(126, 80, 0);
  opacity: 20%;
}
.linebreak {
  color:rgb(126, 80, 0);
  opacity: 20%;
  font-family: system-ui;
  vertical-align: middle;
  font-size: 0.59em;
}

#filters {
  position: fixed;
}

.backpack.cant-put-down {
  opacity: 40%;
}

.backback-joiner {
  opacity: 40%;
}

.backpack-selection {
  border-radius: 0.2em 0.2em 0.2em 0em;
  padding: 0 0.2em 0 0.2em;
  line-height: var(--line-height);
  width: fit-content;
  background-color: var(--selection-color);
  outline: 1px solid var(--light-page-color);
}

.backpack-joiner {
  border-radius: 2px;
  width: 2px;
  background-color: var(--selection-color);
}

.Exp.caret-position-path.sibling{
  /*TODO(andrew): unhack*/
  stroke: #ce9600;
    fill: #ce9600;
}

.editor-caption {
  padding: 8em 6em 1em 6.5em;
  font-family: 'Helvetica Neue';
  color: var(--top-bar-text);
}

svg {
  overflow: visible;
}

#caret {
  z-index: var(--caret-z);
}
#caret.blink {
  animation: 1s blink step-end infinite;
}
.caret-path {
  fill: #f62116;
  stroke: none;
}
@keyframes blink {
  from, to {
    opacity: 100%;
  }
  50% {
    opacity: 0%;
  }
}