:root {
  /* Spacing */
  /* https://carbondesignsystem.com/elements/spacing/overview/ */
  /*  px / rem */
  --01: 2px; /* 2 / 0.125   */
  --02: 4px; /* 4 / 0.25    */
  --03: 8px; /* 8 / 0.5     */
  --04: 12px; /* 12 / 0.75   */
  --05: 16px; /* 16 / 1      */
  --06: 24px; /* 24 / 1.5    */
  --07: 32px; /* 32 / 2      */
  --08: 40px; /* 40 / 2.5    */
  --09: 48px; /* 48 / 3      */
  --10: 64px; /* 64 / 4      */
  --11: 80px; /* 80 / 5      */
  --12: 96px; /* 96 / 6      */
  --13: 160px; /* 160 / 10    */
  --14: 256px; /* 256 / 16    */
  /* COLORS */
  --c-primary: ;
  --c-secondary: ;
  --c-tertiary: ;
  --c-quaternary: ;
  --c-backdrop: #241f1a;
  /* --c-background: #864687;
  --c-background: #a857a8; */
  --c-background: #925992;
  --c-background-on: #fff;
  /* ----- SURFACE COLORS ----- */
  --c-surface: #c0c7c8;
  --c-surface-lite: #ced3d4;
  --c-surface-dim: #b2bbbc;
  --c-surface-brite: #fff;
  --c-surface-dark: #87888f;
  --c-surface-contrast: #000;
  --c-surface-focus: #00ffff;
  /* --c-surface-color: #542c55; */
  --c-surface-color: #763d76;
  /* ----- END SURFACE COLORS ----- */
  /* --c-surface-brite: #fff;
  --c-surface-brite: #ddd; */
  /* SIZES */
  --border-radius: 3px;
}

* {
  box-sizing: border-box;
  transition: all ease 40ms;
}

html {
  background: var(--c-backdrop);
  margin: 0;
  padding: 0;
  scrollbar-gutter: stable;
}

body {
  background: var(--c-background);
  color: var(--c-background-on);
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M7.904 17.563a1.2 1.2 0 0 0 2.228.308l2.09-3.093l4.907 4.907a1.067 1.067 0 0 0 1.509 0l1.047-1.047a1.067 1.067 0 0 0 0-1.509l-4.907-4.907l3.113-2.09a1.2 1.2 0 0 0-.309-2.228L4 4z'/%3E%3C/svg%3E"), default;
  font-family: system-ui;
  font-size: 16px;
  margin: 0;
  height: 100vh;
  overflow: hidden;
  padding: 0;
  position: relative;
}

#app {
  background: var(--c-background);
}

iconify-icon {
  aspect-ratio: 1/1;
  display: inline-block;
  width: 1em;
  height: 1em;
}

/* WIDE VIEWPORT */
@media (min-width: 800px) {
  body {
    /* height: 100vh; */
    /* max-height: 100vh; */
    /* overflow: hidden; */
  }
  #app {
    /* height: 100vh; */
    /* max-height: 100vh; */
    min-height: 100vh;
    /* overflow: hidden; */
  }
  .layout {
    display: grid;
    grid-template-areas: "navpanel navpanel appbar appbar" "navpanel navpanel page page" "navpanel navpanel footer footer";
    grid-template-columns: auto var(--navpanel-width) var(--content-width) auto;
    grid-template-rows: var(--appbar-height) var(--content-height) auto;
    /* height: 100vh; */
    /* max-height: 100vh; */
    min-height: 100vh;
    /* overflow: hidden; */
  }
  .appbar {
    display: grid;
    grid-area: appbar;
    grid-template-columns: subgrid;
    height: var(--appbar-height);
    position: sticky;
    top: 0;
    /* right: 0;
      left: var(--appbar-left); */
    /* width: var(--appbar-width); */
  }
  .appbar .appbar__content {
    grid-area: 1/1/2/2;
  }
  .navpanel {
    display: grid;
    grid-area: navpanel;
    grid-template-columns: subgrid;
    height: 100vh;
    overflow: hidden auto;
    position: sticky;
    top: 0;
  }
  .navpanel .navpanel__content {
    grid-area: 1/2/2/3;
  }
  .navpanel .navpanel__section.-branding {
    padding: 32px;
    position: sticky;
    top: 0;
  }
  .page {
    display: grid;
    grid-area: page;
    grid-template-columns: subgrid;
  }
  .page .page__content {
    grid-area: 1/1/2/2;
  }
  .appfooter {
    display: grid;
    grid-area: footer;
    grid-template-columns: subgrid;
    min-height: 256px;
  }
  .appfooter .appfooter__content {
    grid-area: 1/1/2/2;
    padding: 32px;
  }
}
#app {
  height: 100vh;
  width: 100vw;
}

.shell {
  display: grid;
  grid-template-areas: "windows" "bar";
  grid-template-columns: auto;
  grid-template-rows: 1fr max-content;
  height: 100vh;
  width: 100vw;
}
.shell .shellBar {
  background: var(--c-surface);
  border-top: 1px solid var(--c-surface-brite);
  /* display: flex;
  flex-flow: row nowrap; */
  display: grid;
  gap: 8px;
  grid-template-areas: "tray pin hold etc";
  grid-template-columns: max-content 1fr max-content max-content;
  grid-template-rows: auto;
  grid-area: bar;
  height: 45px;
  padding: 4px 8px;
  position: relative;
}
.shell .shellBar .shellBar__section {
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  height: 36px;
}
.shell .shellBar .shellBar__section.-traySpace {
  grid-area: tray;
}
.shell .shellBar .shellBar__section.-pinSpace {
  grid-area: pin;
}
.shell .shellBar .shellBar__section.-holdSpace {
  grid-area: hold;
}
.shell .shellBar .shellBar__section.-etcSpace {
  grid-area: etc;
}
.shell .shellWindowSpace {
  align-items: center;
  display: flex;
  flex-flow: column nowrap;
  grid-area: windows;
  justify-content: center;
  padding: 24px;
}

.branding {
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  font-family: "Nimbus Mono PS", "Courier New", monospace;
  font-weight: 400;
  gap: 4px;
}
.branding .branding__part.-icon {
  height: 16px;
  width: 16px;
}
.branding .branding__part.-wordmark .branding__wordmark {
  display: inline-block;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.branding .branding__part.-wordmark .branding__wordmark.-tool {
  font-weight: 700;
}
.branding .branding__part.-wordmark .branding__wordmark.-bits {
  font-weight: 400;
}
.branding .branding__part.-wordmark .branding__wordmark.-tray {
  font-weight: 700;
}

.holdSpace .holdSpace__toggle {
  align-items: center;
  background: var(--c-surface-dim);
  border: 1px solid var(--c-surface-brite);
  border-top-color: var(--c-surface-dark);
  border-left-color: var(--c-surface-dark);
  border-radius: var(--border-radius);
  display: flex;
  flex-flow: row nowrap;
  height: 34px;
  padding: 4px 8px;
  width: 120px;
}

.toolFilter {
  border-top: 1px solid var(--c-surface-dark);
  grid-area: filter;
  padding: 16px 0 8px;
}

.toolList {
  grid-area: list;
  overflow: hidden auto;
}

.toolTray {
  display: flex;
  flex-flow: column-reverse nowrap;
  grid-area: tray;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  width: -moz-fit-content;
  width: fit-content;
}
.toolTray .toolTray__toggle {
  align-items: center;
  background: var(--c-surface);
  border: 1px solid var(--c-surface-dark);
  border-top-color: var(--c-surface-brite);
  border-left-color: var(--c-surface-brite);
  border-radius: var(--border-radius);
  box-shadow: 1px 1px 0 var(--c-surface-contrast);
  display: flex;
  flex-flow: row nowrap;
  font-size: 14px;
  color: var(--c-surface-contrast);
  cursor: inherit;
  height: 28px;
  height: 34px;
  line-height: 1;
  padding: 4px 14px;
  position: relative;
  top: -1px;
  width: 140px;
  width: -moz-max-content;
  width: max-content;
}
.toolTray .toolTray__toggle::marker, .toolTray .toolTray__toggle :is(::-webkit-details-marker) {
  display: none;
  font-family: monospace;
  font-weight: bold;
}
.toolTray .toolTray__toggle:hover {
  box-shadow: 2px 2px 0 var(--c-surface-contrast);
  transform: translate(-1px, -1px);
}
.toolTray .toolTray__toggle:active {
  background: var(--c-surface-dim);
  border-color: var(--c-surface-dark) var(--c-surface-brite) var(--c-surface-brite) var(--c-surface-dark);
  box-shadow: inset 1px 1px 0 var(--c-surface-contrast);
  transform: translate(1px, 1px);
}
.toolTray:open .toolTray__toggle {
  border-color: var(--c-surface-dark) var(--c-surface-brite) var(--c-surface-brite) var(--c-surface-dark);
  box-shadow: inset 1px 1px 0 var(--c-surface-contrast);
  transform: translate(1px, 1px);
}
.toolTray .toolTray__content {
  background: var(--c-surface);
  border: 1px solid var(--c-surface-dark);
  border-top-color: var(--c-surface-brite);
  border-left-color: var(--c-surface-brite);
  border-radius: var(--border-radius);
  box-shadow: 1px 1px 0 var(--c-surface-contrast);
  color: var(--c-surface-contrast);
  display: grid;
  gap: 8px;
  grid-template-areas: "list" "filter";
  grid-template-columns: auto;
  grid-template-rows: 1fr max-content;
  height: 920px;
  max-height: calc(100vh - 45px - 8px);
  padding: 8px;
  position: fixed;
  bottom: 49px;
  left: 4px;
  scrollbar-color: var(--c-surface-dark) var(--c-surface-lite);
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  width: 300px;
}

.window {
  background: var(--c-surface);
  border: 1px solid var(--c-surface-dark);
  border-top-color: var(--c-surface-brite);
  border-left-color: var(--c-surface-brite);
  border-radius: var(--border-radius);
  box-shadow: 1px 1px 0 var(--c-surface-contrast);
  color: var(--c-surface-contrast);
  display: grid;
  gap: 4px;
  grid-template-areas: "header" "content" "footer";
  grid-template-columns: auto;
  grid-template-rows: max-content 1fr max-content;
  height: 100%;
  max-height: 1200px;
  max-width: 800px;
  padding: 4px;
  width: 100%;
}
.window .window__header {
  background: var(--c-surface-dark);
  color: var(--c-surface-brite);
  grid-area: header;
  padding: 8px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.window .window__header .window__title {
  font-family: "Nimbus Mono PS", "Courier New", monospace;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  margin: 0;
  text-align: center;
  text-shadow: 1px 1px 0 var(--c-surface-contrast);
}
.window.-focus .window__header {
  background: var(--c-surface-color);
  border: 1px solid var(--c-surface-dark);
  border-color: var(--c-surface-dark) var(--c-surface-brite) var(--c-surface-brite) var(--c-surface-dark);
  box-shadow: inset 1px 1px 0 var(--c-surface-contrast);
}
.window .window__content {
  grid-area: content;
}
.window .window__footer {
  grid-area: footer;
}

.-disabled {
  border-color: var(--c-surface-dark) !important;
  box-shadow: unset !important;
  color: var(--c-surface-dark) !important;
  pointer-events: none !important;
}

:root {
  color-scheme: dark;
}/*# sourceMappingURL=style.css.map */