.code * {
    font-family: consolas, monospace;
    font-size: 11pt;
    user-select: none; /* Selection of instructions is via specific commands. Overridden in fields for conventional selection */
}
.code {
    color: var(--defaultText);
    background-color: var(--panelBackground);
    border-color: var(--panelBackground);
    font-style: normal;
}

.code.running {
   cursor: progress;
}

*:focus {
    outline: none;
}

input, input:focus , input:active{
    border: none;
    outline: none;
    padding: 0px;
    margin: 0px;
    caret-color: var(--defaultText);
}

/* Basic Colour scheme */

el-hash {
    display: none;
}

span {
    background-color: inherit;
}
el-kw {
    color: var(--keyword);
}

el-field, el-field * {
    user-select: all;
}
el-field el-txt {
    border-style:hidden;
    border-width: 1px;
}
el-field.selected el-txt {
    border-style: solid;
    border-color: black;
    position:relative; /* Ensures that the border is not overwritten by textfields in the line below */ 
}
el-method, el-method el-field.ok el-txt {
    color: var(--method);
}
el-type {
    color: var(--type);
}
el-lit {
    color: var(--string);
    white-space: pre-wrap;
}
el-id {
    color: var(--namedValue);
    white-space: pre;
}
el-instr {
    font-family: consolas, monospace;
    color: var(--instruction); background-color: white;
}
.newcode {
    color: var(--optional);
}
.selected > .newcode {
    color: white;
}
el-regex {
    color: var(--string);
}

/* Header & comments */
el-comment, el-comment *, el-comment el-field el-txt {
    color: var(--comment);
}

el-comment input {
    color: black;
}
/* Consecutive global comments to have no extra v. space */
el-global:has(el-comment) {
  padding-bottom: 0;
}

#fileStatus {
    display: none;
}

el-header el-user, el-header el-profile {
    display:none;
}

el-header, el-header * {
    color: var(--comment);
}
el-header .error {
    color: var(--error)
}
el-header .warning {
    color: var(--warning)
}
el-header .advisory {
    color: var(--advisory)
}
el-header .ok {
    color: var(--ok)
}


/* Horizontal and vertical spacing */
el-statement, el-constructor, el-prop, el-class > el-func, el-class > el-proc, el-class > el-member {
    display: block;
    background-color: transparent;
    border-left-style: solid;
    border-left-width: 2ch;
    border-color: transparent;
}

el-statement:not(.multiline), el-const, el-enum{
    display: block;
    padding-left: 1ch; /* Indent 2nd and subsequent lines if el-txt wraps */
    text-indent: -1ch;
}

/* Globals and members, generally, to have v. space after */
el-header, el-main, el-proc, el-func, el-class, el-global, el-test {
    display: block;
    padding-bottom: 2ch;
}

/* Globals and members, generally, to have v. space after */
el-class el-proc, el-class el-func, el-class, el-class el-constructor, el-class el-member, el-enum {
    display: block;
    padding-bottom: 1ch;
}


/* Only the last of consecutive properties, constants should have exta v. space */
el-prop:has(+ :not(el-prop)), 
el-const:has(+ :not(el-const)) {
    display: block;
    padding-bottom: 1ch;
}

/* Last member in a class/record - no added v. space (no other circumstance where they would be immediately followed by a keyword) */
el-proc:has(+ el-kw), el-func:has(+ el-kw), el-prop:has(+ el-kw) 
el-proc:has(+ el-kw), el-func:has(+ el-kw), el-prop:has(+ el-kw) 
{
    padding-bottom: 0;
}

/* Frame selection */
.selected > * , .selected > .outdent *{
    border-left-color: var(--selection);
}

.selected > el-bp,
.selected > el-top, 
.selected > el-top *, 
.selected > el-kw,
.selected > el-instr, 
.selected > el-punc,
.selected > el-comment,
.selected > el-field, 
.selected > el-field *, 
.selected > el-txt, 
.selected > el-place, 
.selected > el-compl,
.selected > .outdent el-top, .selected > .outdent el-top *
{
    background-color: var(--selection);
    border-right-color: var(--selection);
}

/* Multline Collapse / Expand */
el-expand {
    display: none;
}
.multiline.collapsed > :not(el-top) {
    display: none;
}
.multiline.collapsed el-expand {
    display:inline;
    font-weight: bold;
    color: var(--reverseText);
    margin-right: 1ch;
    /* cursor: pointer; why only this? */
}
/* colour corresponds to worst of parseStatus and compileStatus (and el-testStatus - for el-tests only)*/
.multiline.collapsed el-expand {
    background-color: var(--ok);
}
.multiline.collapsed.warning el-expand {
    background-color: var(--warning);
}

.multiline.collapsed.advisory el-expand {
    background-color: var(--advisory);
}

.multiline.collapsed.error el-expand {
    background-color: var(--error);
}


/* Fields */
el-field.warning, el-field.warning el-kw, el-field.warning el-type, el-field.warning el-lit, el-field.warning el-method {
    background-color: var(--warning);
}

el-field.advisory, el-field.advisory el-kw, el-field.advisory el-type, el-field.advisory el-lit, el-field.advisory el-method {
    background-color: var(--advisory);
}


.error el-field, el-field.error el-kw, el-field.error  el-type, el-field.error  el-lit, el-field.error el-method {
    color: var(--defaultText);
}

/* el-field-el-txt*/
el-field el-txt {
    color: var(--defaultText);
    background-color: transparent;
    font-family: consolas, monospace; /* needed for comments in documented code */
}
el-field.error *, el-field.error input  {
    background-color: var(--warning);
}
el-field.warning *, el-field.warning input {
    background-color: var(--warning);
}
el-field.advisory *, el-field.advisory input {
    background-color: var(--advisory);
}

el-field.selected.ok el-txt, el-field.selected.ok input {
    background-color: var(--ok);
}
el-field.selected.ok.optional.empty el-txt, el-field.selected.ok.optional.empty input {
    background-color: var(--optional);
}

/* el-field el-place */
el-field el-place {
  display: none; 
}

el-field.empty el-place, el-field.empty el-place * {
    display: inline;
    color: var(--reverseText);
}

el-field.empty.optional el-place, el-field.empty.optional el-place * {
    display: none;
    color: var(--optional);
}

el-field.selected ~ el-field.empty.optional el-place, el-field.selected ~ el-field.empty.optional el-place * {
    display: inline;
    color: var(--optional);
}

el-field.empty.selected el-place, el-field.empty.selected el-place * {
    display: inline;
    color: var(--reverseText);
    background-color: var(--warning);
}

el-field.empty.optional.selected el-place, el-field.empty.optional.selected el-place * {
    display: inline;
    color: var(--reverseText);
    background-color: var(--optional);
}

el-field.empty.optional.selected el-place, el-field.empty.optional.selected el-place * {
    display: inline;
}

/* ... however, different rules when it is the 'holding' frame that is selected */
.selected > el-top el-field.empty el-place, .selected > el-field.empty el-place {
    display:inline;
    color: var(--warning);
}
.selected > el-top el-field.empty.optional el-place, .selected > el-field.empty.optional el-place,
.selected > el-top el-field.empty.optional el-place *, .selected > el-field.empty.optional el-place *{
    display:inline;
    color: var(--reverseText);
}
el-field.selected ~ el-field.empty el-place, el-field.selected ~ el-field.empty.optional el-place{
    display: inline;
}

/* el-help */
el-help {
    display: none;
}

el-help a {
    color: white; 
}
.selected > el-help, .selected el-top > el-help, el-msg > el-help  {
    display: inline;
    background-color: var(--selection);
    color: white;
}

.selected.error > el-help {
    display: none; /* Because the error message will contain the help */
}

el-field.error > el-help {
    display: inline;
}

el-field.ok > el-help {
    display: none;
}

el-msg.error > el-help {
    background-color: var(--error);
}


/* el-field el-compl */
el-field el-compl  {
    display: none;
}

el-field.selected el-compl, el-field.selected el-compl * {
    display: inline;
    color: var(--reverseText);
    background-color: var(--warning);
}

el-field.selected.empty el-compl, el-field.selected.empty el-compl *,
el-field.selected.empty.optional el-compl, el-field.selected.empty.optional el-compl *  {
    display: none;
}

el-field .autocomplete-popup, .context-menu, el-field .autocomplete-popup * {
    text-indent: 0;
    background-color: lightgray;
}

.autocomplete-item.keyword {
    color: var(--keyword);
}
.autocomplete-item.id {
    color: var(--namedValue);
}
.autocomplete-item.method {
    color: var(--method);
}
.autocomplete-item.type {
    color: var(--type);
}

/*  el-msg */
el-msg {
    display: inline;
    color: var(--reverseText);
}

el-msg.ok {
    background-color: var(--ok);
}
el-msg.warning {
    background-color: var(--warning);
}
el-msg.advisory {
    background-color: var(--advisory);
}

el-msg.error {
    background-color: var(--error);
    white-space: pre;
}

/* el-field el-msg */

el-field el-msg {
    display: inline;
}

/* Selectors */
  el-select * {
    background-color: var(--reverseText);
    color: var(--optional);
  }
  el-select .options {
    display: none; 
  }
  .selected > el-select * {
    border-style: solid;
    border-color: black;
    border-width: 1px;
    display: inline;
    background-color: transparent;
    color: var(--optional);
  }

  .selected > el-select el-help,   .selected > el-select el-help a {
    display: inline;
    background-color: transparent;
    color: var(--optional);
  }
    
  .selected > el-select el-txt {
    color: var(--defaultText);
  }

  .warning > el-select > el-txt {
    color: var(--warning);
  }

  .advisory > el-select > el-txt {
    color: var(--advisory);
  }

  /* el-select el-place */
el-select el-place  {
    display: none;
}
.empty > el-select el-place {
    display: inline;
    color: var(--optional);
}
.selected > el-select el-place {
    display: none;
}

el-fr {
    float: right;
    color: darkgrey;
    font-size: 11pt;
    margin-left: 5px;
    text-indent: 0;
}

el-const el-fr, el-const.multiline.collapsed el-fr,
el-enum el-fr, el-enum.multiline.collapsed el-fr {
    display: inline-block;
}

el-statement.selected:not(.multiline) el-fr, 
.multiline.selected > el-top el-fr, 
el-prop.selected el-fr,
el-const.selected el-fr, 
el-enum.selected el-fr, 
.selected ~ el-fr, 
el-method:has(el-field.selected) ~ el-fr,
el-fr:has(~ el-field.selected), /* this and next clause specifically for 'repeat expression' el-field */
el-statement.selected > el-fr  
 {
    background-color: var(--selection);
    color: white;
    text-indent: 0;
}

.outdent {
    border-left: 0;
}


el-bp {
    display: none;
}
.breakpoint > el-top el-bp, .breakpoint > el-bp {
    display: inline;
    color: red;
}

.paused-at > * {
    border-left-color: var(--warning);
}

.paused-at > el-bp,
.paused-at > el-top, 
.paused-at > el-top *, 
.paused-at > el-kw, 
.paused-at > el-field, 
.paused-at > el-field *, 
.paused-at > el-txt, 
.paused-at > el-place, 
.paused-at > el-compl,
.paused-at > .outdent el-top, 
.paused-at > .outdent el-top * {
    background-color: var(--warning);
    border-right-color: var(--warning);
}
el-statement.paused-at > el-fr  
 {
    background-color: var(--warning);
    color: white;
    text-indent: 0;
}

.code img, el-code img {
    height: 0.9em;
    margin: 0;
}

.error-link {
    cursor: pointer;
    text-decoration: underline;
  }

  .ghosted > *:not(.context-menu, .context-menu *, el-top), .ghosted > el-top > *:not(.context-menu) {
    opacity: 35%;
  }

  .ghosted.selected > el-top {
    background-color: rgba(var(--selection), 0.35);
  }

  /* Imported */
  .multiline.imported > * {
    display: none;
  }

 .multiline.imported > el-top,  .multiline.imported > el-fr {
    display: inline;
  }

  .multiline.imported > el-top el-expand {
    display: none;
  }

  .imported > el-top::before {
    content: "import ";
    color: var(--keyword);
  }

  el-comment.imported > el-top::before {
    content: "";
  }

  .imported:has(+ .imported) {
    display: block;
    padding-bottom: 0;
  }

  .context-menu-item.separator {
    border-top: solid 1px black;
  }