/* Defines */
:root {
  --fntMono: "IBM Plex Mono", monospace;
  --fntSans: "IBM Plex Sans", sans-serif;
  --fntSizeHeading: 24px;
  --fntSizeTitle: 18px;
  --fntSizeBase: 16px;
  --fntSizeSmaller: 14px;
  --clrText: #ccc;
  --clrTextFaint: #888;
  --clrTextFainter: #444;
  --clrTextTerminal: #8d8b76;
  --clrTextError: #b63939;
  --clrBodyBg: 0,0,0;
  --clrPanelBg: #202020;
  --clrControl: #9f7e52;
  --clrControlHover: #d08e4c;
}

/* Global overrides */
* { box-sizing: border-box; scrollbar-color: #333 var(--clrPanelBg); }
::-webkit-scrollbar { background-color: var(--clrPanelBg); width: 8px; }
::-webkit-scrollbar-thumb { background-color: #333; }

a { color: #8bb3e0; text-decoration: none; }
a:hover { text-decoration: underline; }

button {
  display: block; border: none; margin: 0; padding: 0; background-color: transparent;
  & svg { width: 100%; height: 100%; }
  & svg * { stroke: var(--clrControl); }
  &:hover svg * { stroke: var(--clrControlHover); }
  &[disabled] svg * { stroke: var(--clrTextFainter); }
}

& input[type=text] {
  box-shadow: none; -webkit-box-shadow: none; -webkit-appearance: none; outline: none;
  -webkit-border-radius: 0px; border-radius: 0; border: none;
  font-family: inherit; color: var(--clrText); background-color: var(--clrPanelBg);
}

/* Layout, specifics */
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
html { background-color: rgb(var(--clrBodyBg)); padding: 32px; }
body {
  font-family: var(--fntMono); font-size: var(--fntSizeBase);
  color: var(--clrText);
}
footer {
  position: fixed; bottom: 0; right: 0; left: 0; padding: 0 32px 8px 32px;
  font-family: var(--fntSans); font-size: 13px; color: var(--clrTextFaint);
  & span { display: block; float: right; }
}
.top-ctrl {
  position: fixed; top: 32px; right: 32px; left: 32px; height: 48px;
  display: flex;
  background-color: var(--clrPanelBg);
  font-family: var(--fntSans);
  & button#btnPlayPause {
    margin: 4px 12px 4px 4px; padding: 2px 0 0 0; width: 40px; height: 40px;
    border: 2px solid #666; border-radius: 24px;
    &:hover { background-color: #383838; }
    & svg { width: 32px; height: 32px; }
    & svg * { stroke: #666; }
    &.on svg * { stroke: #ef9336; filter: drop-shadow(2px 2px 22px #ef9336); }
  }
  & button.small {
    margin: 8px 3px 0 0; padding: 3px; width: 32px; height: 32px;
  }
  & button#btnLibrary { width: 40px; height: 40px; margin: 4px 8px; }
  & #expander { flex-grow: 1; }
  & #pnlTitle {
    flex-grow: 1; max-width: 800px; margin-left: 4px;
    display: flex; align-items: center;
    & span { display: block; padding: 3px 0 0 5px; visibility: hidden; }
    & span.visible { visibility: visible;}
    & .titleBorder {
      display: flex;
      border: 1px solid transparent;
      border-radius: 4px; padding: 4px 4px 4px 0; width: 100%;
      background-color: var(--clrPanelBg);
    }
    &:focus-within .titleBorder { border: 1px solid var(--clrText); }
    & input[type=text] {
      display: block; flex-grow: 1;
      font-size: var(--fntSizeTitle); color: #aaa; font-weight: 600;
      &:focus { color: var(--clrText); }
    }
    & button {
      width: 26px; height: 26px;
      visibility: hidden;
      &.cancel svg * { stroke: #9f4861; }
      &.cancel:hover svg * { stroke: #e74776; }
      &.ok svg * { stroke: #5f7558; }
      &.ok:hover svg * { stroke: #85b973; }
    }
    &:focus-within button { visibility: visible; }
  }
}
.csound-log {
  position: fixed; top: 96px; right: 32px; bottom: 32px;
  width: calc(50% - 32px - 16px); padding: 8px;
  white-space: pre; overflow-x: auto;
  background-color: var(--clrPanelBg);
  font-size: var(--fntSizeSmaller);
  color: var(--clrTextTerminal);
  & .error { color: var(--clrTextError); }
}

.modal {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  padding: 64px 64px; justify-content: center; align-items: flex-start;
  background-color: rgba(var(--clrBodyBg), 0.62); font-family: var(--fntSans);
  display: none;
  &.visible { display: flex; }
}
.modal .modal-inner {
  width: 100%; max-width: 1024px; max-height: 100%; position: absolute;
  overflow-y: auto; padding: 24px; background-color: var(--clrPanelBg);
  & button.close {
    width: 32px; height: 32px; padding: 4px; background-color: #303030;
    position: absolute; top: 0; right: 0;
    &:hover { background-color: #383838; }
  }
  & h2 {
    margin: 0 0 24px 0;
    font-size: var(--fntSizeHeading);
  }
  & p.remark { font-style: italic; color: var(--clrTextFaint); }
  & a.download-all-patches {
    display: inline-block; padding-bottom: 1px; color: var(--clrControl);
    &:hover { color: var(--clrControlHover); text-decoration: none; }
    &.hidden { display: none; }
  }
  & table {
    width: 100%; border-collapse: collapse; margin-bottom: 32px;
    & td {
      padding: 6px 12px 3px 6px; vertical-align: top; min-width: 180px;
      border-bottom: 1px dashed var(--clrTextFainter);
    }
    & thead td { border-bottom-style: solid; font-weight: 600; }
    & thead tr td:last-child * { visibility: visible; font-weight: 400; }
    & tr td:first-child { width: 100%; padding-left: 0; }
    & tr td:last-child * { visibility: hidden; }
    & tr:hover td:last-child * { visibility: visible; }
    & tbody tr:hover td { background-color: #282828; }
    & tbody tr:hover td:first-child { color: var(--clrControlHover); cursor: pointer; }
    & tbody tr td:last-child {
      display: flex;
      & span { display: none; cursor: pointer; color: var(--clrControl); }
      & span.visible { display: block; }
      & span:hover { cursor: pointer; color: var(--clrControlHover); }
      & button { width: 24px; height: 24px; padding: 2px; margin-right: 2px; }
    }
  }
}
.hiddendownloadlink { visibility: hidden; }

.editor {
  position: fixed; top: 96px; right: 32px; left: 32px; bottom: 32px;
  width: calc(50% - 32px);
  background-color: var(--clrPanelBg); font-size: var(--fntSizeSmaller);
  & #editorHost { height: 100%; }
}

/* Editor styling */
.cm-editor {
  height: 100%; background-color: var(--clrPanelBg);
  & .cm-scroller { font-family: var(--fntMono); }
  & .cm-gutters { background-color: transparent; border: none; }
  & .cm-activeLineGutter { background-color: #303030; }
  & .cm-content { background-color: transparent; }
  & .cm-activeLine { background-color: #ffffff10; }
  & .cm-cursor { border-left: 1px solid #aaa; border-right: 1px solid #aaa; }
  & .cm-selectionMatch { background-color: unset; }
  & .cm-panels { background-color: transparent; }
  & .cm-panels.cm-panels-bottom {
    border-top: 2px solid var(--clrTextFainter); padding: 3px; height: 24px;
  }
  & .cm-panels p { color: var(--clrText); }
  & .cm-highlight-bad { background: rgba(255, 128, 128, 0.3); }
  & .cm-highlight-good { background: rgba(128, 255, 128, 0.3); }
}
#editorHost .cm-panels p { color: var(--clrText); }

.cm-editor, .cm-editor.cm-focused {
  & .cm-scroller .cm-selectionLayer .cm-selectionBackground { background-color: #90909044; }
}

/* CSOUND syntax styling */
.cm-csound-global-var {font-weight: 600;}
.cm-csound-define {color: #d9cfae; font-weight: 600;}
.cm-csound-i-rate-var {color: #b1cca8;}
.cm-csound-opcode {color: #8bb3e0; font-weight: 600;}
.cm-csound-global-constant {color: #b1cca8;}
.cm-csound-a-rate-var {color: #cc8397;}
.cm-csound-k-rate-var {color: #d3a591;}
.cm-csound-s-rate-var {color: #b1cca8;}
.cm-csound-f-rate-var {color: #a0bfcb;}
.cm-csound-p-field-var {color: #a9c0a3; font-weight: 600;}
.cm-csound-xml-tag {color: #698d72;}
.cm-csound-comment {color: #979897; }



/* ibm-plex-mono-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/ibm-plex-mono-v19-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* ibm-plex-mono-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/ibm-plex-mono-v19-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* ibm-plex-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/ibm-plex-sans-v19-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* ibm-plex-sans-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/ibm-plex-sans-v19-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* ibm-plex-sans-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/ibm-plex-sans-v19-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* ibm-plex-sans-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 600;
  src: url('fonts/ibm-plex-sans-v19-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}