/* #region Reset */
body, body *:where(:not(html, iframe, canvas, img, svg, video, audio, svg, link, script, style)) {
  display: revert;
  all: unset;
}

body, body *, body *::before, body *::after {
  box-sizing: border-box;
}

a, button {
  cursor: revert;
}

ol, ul, menu {
  list-style: none;
}

[data-highlight] {
  outline: 1px solid #ff000050;
  background: #ff000025;
}

#fiveserver-info-wrapper {
  display: none ! important;
}

:root {
  interpolate-size: allow-keywords;
}

body {
  display: block;
  overflow: hidden;
  color: #222;
  font-family: SF Pro Display, SF Pro, Helvetica Neue, Helvetica, Arial;
}
/* #endregion Reset */

/* #region Chat styling */
.message-control {
  display: none;
}

.container {
  display: flex;
  height: 100vh;
  overflow: auto;
  .frame-wrapper {
    width: 100%;
    height: 100%;
  }
}

.loading-message {
  position: fixed;
  bottom: 0;
}

.frame-wrapper {
  .url-bar {
    display: none;
  }
  .content-frame {
    border: 0;
    width: 100%;
    height: 100%;
  }
}

.frame-wrapper[data-url="chat"] {
  /* outline: 20px solid red; */
  position: static !important;
  border-right: 1px solid #8883;
  width: 25% !important;
}


bosdy.viewer {
  width: 100dvw;
  height: 100dvh;
}
/*  */
/* .frame-wrapper[data-url="chat"] { */
/* display: flex; */
/* position: fixed; */
/* top: 5em; */
/* left: 5em; */
/* flex-direction: column; */
/* border: 1px solid #808080; */
/* border-radius: .5em; */
/* background: rgba(255, 255, 255, 0.3); */
/* width: 32vw; */
/* height: calc(100vh - 10em); */
/* animation: chatFrameFadeIn .2s ease-out; */
/* animation-fill-mode: both; */
/* backdrop-filter: blur(10px); */
/* } */
/*  */
/* @keyframes chatFrameFadeIn { */
/* 0% { */
/* opacity: 0; */
/* } */
/* 100% { */
/* opacity: 1; */
/* } */
/* } */
/*  */
/* .frame-wrapper[data-url="chat"].dragging { */
/* transition: none; */
/* z-index: 1000; */
/* } */
/*  */
/* .drag-handle { */
/* display: flex; */
/* align-items: center; */
/* justify-content: center; */
/* border-radius: .5em .5em 0 0; */
/* background-color: rgba(128, 128, 128, 0.2); */
/* cursor: move; */
/* height: 1.5em; */
/* color: #666; */
/* font-size: 14px; */
/* user-select: none; */
/* } */
/*  */
/* .drag-handle:hover { */
/* background-color: rgba(128, 128, 128, 0.3); */
/* } */

iframe {
  background: transparent;
}

body.chat {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overeflow: hidden;
  h1 {
    display: block;
    padding: 1em;
    color: purple;
    font-weight: bold;
  }
  #container {
    display: flex;
    flex: 1;
    flex-direction: column;

    #chatbox {
      flex: 1;
      padding: 1em;
      height: 100vh;
      overflow-y: auto;
      font-size: .8em;
      .message {
        display: block;
        b {
          font-weight: bold;
        }
      }
    }

    .input-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: 1px solid #eee;
      background: #fff;
      input {
        padding: 1em;
        width: 100%;
        field-sizing: content;
      }

      button {
        cursor: pointer;
        padding: 0 1em;
        height: 100%;
        color: purple;
        &:hover {
          background: purple;
          color: #fff;
        }
      }
    }
  }
}
/* #endregion Chat styling */

html {
  scroll-behavior: smooth;
}

/* #region Table styling */
body.table {
  background: #eee;
  /* width: 150vw; */
  overflow: auto;
  overflow-x: hidden;


  @keyframes cellReveal {
    0% {
      max-width: 0;
      /* max-height: 0; */
    }
    100% {
      /* max-width: 33vw; */
      max-width: 100%;
      /* max-height: 100%; */
      /* max-height: 33vh; */
    }
  }


  /* #region Table structure and base styling */
  table {
    --row: #8882;
    display: grid;
    grid-template-rows: min-content auto;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-columns: 13ch repeat(4, auto);
    grid-template-columns: 14ch 1fr 1fr 1fr 1fr;
    transition: grid .2s linear;
    background: #eee;
    min-width: 100vw;
    /* min-height: 100vh; */
    height: 100vh;
    counter-reset: category 0;

  }

  thead, tbody, tfoot {
    display: table-header-group;
  }

  tbody {
    display: table-row-group;
    display: contents;
  }

  tfoot {
    display: table-footer-group;
  }

  tr {
    display: table-row;
    display: flex;
    display: contents;
  }

  td, th {
    display: table-cell;
    display: flex;
  }

  th, caption {
    text-align: end;
  }

  th:first-child, td:first-child {
    /* padding-right: 1em; */
    text-align: end;
  }


  th:hover {
    filter: drop-shadow(0 0 .5em #8882);
    z-index: 999;
    header {
      opacity: 1 !important;
    }

    article {
      bottom: unset;
      opacity: 1;
      background: #fff;

    }
  }

  td:not(:has(output:empty)) {
    border: 1ch solid #b0b8;


    output {
      display: block;
      outline: 0;
      /* height: 100%; */

    }
    article {
      /* display: none; */
      /* opacity: 1 !important; */
      /* background: red; */
    }
  }

  td {
    position: sticky;
    transition: all .15s linear;
    /* top: 10em; */
    border-top: 1ch solid #8085;
    border-top: .5ch solid #8087;
    background: #eee;
    /* border-left: 1px solid #aaa; */
    /* padding: .8em 1em; */
    /* overflow: visible; */
    overflow: hidden;
    /* border-left: 1px solid #f8f8f8; */



    &:hover {
      /* outline: 1px solid #f0f; */
      /* filter: drop-shadow(0 0 .5em #8882); */
      /* z-index: 999; */
      /* background: red; */
      header {}

      article {
        /* bottom: unset; */
        /* opacity: 1; */


      }
    }
    &:first-of-type {
      margin-left: .5ch;
      /* border-left: 1em solid #8088; */
      padding-left: 0;
      article {
        padding-left: 0;
      }
    }
  }


  /* .portfolio td, .portfolio th { */
  /* top: 9em; */
  /* top: 5em; */
  /* } */
  /*  */
  /* .people td, .people th { */
  /* top: 10.5em; */
  /* } */
  /*  */
  /* .process td, .process th { */
  /* top: 12em; */
  /* } */
  /* .platform td, .platform th { */
  /* top: 13.5em; */
  /* } */
  /*  */
  /* .practice td, .practice th { */
  /* top: 15em; */
  /* } */
  /*  */
  /* .place td, .place th { */
  /* top: 16.5em; */
  /* } */
  /*  */
  /* .partnership td, .partnership th { */
  /* top: 18em; */
  /* } */
  /*  */



  /* #endregion Table structure and base styling */

  /* #region Header styling */
  thead {
    display: grid;
    position: sticky;
    top: 0;
    align-self: start;
    grid-template-rows: min-content;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    z-index: 9999;
    margin-bottom: 2em;
    /* border-bottom: 1px solid #eee; */
    /* background: #f8f8f8; */
    /* background: #eee; */
    padding: 1em 0;
    height: 5em;
    /* overflow: hidden; */
    article {
      display: block;
      display: none;
      bottom: .5em;
      /* position: static; */
      opacity: .5;
    }

    h1 {
      display: block;
      padding-top: 0em;
      padding-left: 1em;
      width: 0ch;
      line-height: 1;
      letter-spacing: -.025em;
      color: purple;
      font-size: .9em;
      font-weight: bold;
    }

    tr {
      border: none;
      background: #fff;
    }

    th {
      position: relative;
      justify-content: start;
      /* padding: 1em; */
      vertical-align: bottom;
      text-align: center;
      &:hover {
        filter: drop-shadow(0 0 .5em #8882);
        z-index: 99999;


        .level {
          opacity: 1;



          &:after {
            opacity: 1 !important;
          }
        }


        header h3 {
          color: #000 !important;

        }

      }
      header {
        display: flex;
        display: none;
        position: absolute;
        top: 1em;
        right: 0;
        left: 0;
        justify-content: space-between;
        opacity: 1;
        padding: 0 1rem;
        text-align: left;


      }
      .level {
        display: block !important;
        margin-top: -.25em;
        letter-spacing: unset !important;
        color: #666 !important;
        /* position: static !important; */

        font-size: 1.15em !important;



        &:first-child:nth-child(1) {
          /* display: block; */
          /* position: relative; */


          &:after {
            position: absolute;
            opacity: 0;
            /* margin-left: -1.2em; */
            margin-left: .25em;
            content: " → ";
            pointer-events: none;
          }
        }


      }
      abbr.level {
        /* display: none !important; */
        opacity: 0;

      }
      /* font-weight: bold; */

      &:first-child {
        text-align: start;



        &:after {
          content: unset;
        }
      }
    }

    #progress {
      top: 0px;
      z-index: 999;
      text-align: center;

      th:first-child {
        display: none;
      }

      th {

        /* position: absolute !important; */
        &:after {
          display: block;
          position: absolute;
          right: 0;
          bottom: 0;
          left: 0;
          background: #888;
          height: 1px;
          content: '';
        }

        h2 {
          display: none;
        }

      }

      th {
        header {
          display: block;

          abbr.level {
            /* font-size: 1rem; */
          }


        }
        /*  */
        /* article { */
        /* display: block; */
        /* display: none; */
        /* height: 0; */
        /* } */

        &:hover {
          .level:last-child:nth-child(2) {}
        }
      }

      &:hover {
        article {}
      }
    }
  }
  /* #endregion Header styling */

  /* #region Body styling */

  th {
    position: sticky;
    left: 0;
    /* vertical-align: bottom; */
    /* align-items: flex-end; */
    /* justify-content: end; */
    z-index: 999;
    /* background: #eee; */
    padding-right: .5em;

    h2, h3 {
      display: block;
      position: sticky;
      top: 4rem;
      z-index: 999;
      /* margin-top: .3em; */
      margin-top: -.45em;
      margin-bottom: .33em;

      letter-spacing: -.01em;
      color: #808;
      font-size: 1.33em;
      font-weight: bold;
      offset-anchor: 10em;
    }
  }
}

tfoot {
  th {
    font-weight: bold;
  }
}
/* #endregion Body styling */



body.table thead ul {
  display: block;
  margin-top: 1em;
  list-style-type: disc;
  li {
    display: list-item;
    margin-left: 1.5em;
  }
}

body.table thead th:not(first-child) {
  position: relative;
  /* left: unset; */
}


/* #region Cell styling */
td, th {
  display: flex;
  display: flex;

  position: relative;
  align-content: flex-start;
  align-items: flex-start;
  flex-direction: row;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  min-width: 1vw;
  height: 12.5vh;
  height: 6em;

  /* min-height: 12.5vh; */
  /* min-height */
  /* max-height: 50vh; */

  &:after {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    background: #aaa;
    height: 1px;
  }

  header {
    display: block;
    display: none;
    opacity: .33;
    /* display: none; */
    padding-bottom: .25em;
    font-weight: bold;
    abbr {
      white-space: nowrap;
    }
    .category {
      display: none;
    }
    .level {
      /* opacity: 0; */
      display: inline-block;
    }

    .category {
      &:after {
        content: ':';
      }
    }

    .importance {
      position: absolute;
      top: 1.75em;
      right: 1em;
      /* left: 0; */
      opacity: 1;
      margin: 0 auto;
      overflow: hidden;
      text-transform: uppercase;
      letter-spacing: .025em;
      color: #888;
      font-size: .75em;
      font-weight: 500;

      &[title='Medium'] {
        width: 3.66ch;
      }
    }
  }

  article {
    display: block;
    display: none;
    position: absolute;
    top: 3em;
    right: 0;
    bottom: 2rem;
    left: 0;
    /* position: absolute; */
    /* transition: all .2s linear; */
    opacity: .33;
    /* height: auto; */
    /* height: 1em; */
    padding: 0em 1rem 1rem 1rem;
    /* display: none; */
    /* margin-top: 2em; */
    /* height: calc(100% - 3em); */
    /* height: 2.5em; */
    overflow: auto;
    text-align: start;
    font-size: .8em;

    hyphens: auto;
    &:hover {}

    p {
      /* display: block; */
      /* margin: -1em; */
      /* padding: 1em; */
      line-height: 1.2;
    }
  }

  &:hover {
    /* position: relative; */
    /* background: #f0f2 !important; */

    /* .importance { */
    /* opacity: 0; */
    /* } */
    /*  */
    /* .level, .category { */
    /* opacity: 1; */
    /* } */
    /*  */
    /* article { */
    /* overflow: visible; */
    /* height: 5em; */
    /* color: #000; */
    /* } */
  }
}
/* #endregion Cell styling */

/* #region Interaction effects */
/* table { */
/* &:has(tr > *:nth-child(2):hover) tr > *:nth-child(2), */
/* &:has(tr > *:nth-child(3):hover) tr > *:nth-child(3), */
/* &:has(tr > *:nth-child(4):hover) tr > *:nth-child(4), */
/* &:has(tr > *:nth-child(5):hover) tr > *:nth-child(5) { */
/* background: var(--col); */
/*  */
/* header { */
/* color: purple !important; */
/* } */
/* } */
/* } */

/* tbody > tr:hover { */
/* background: var(--row); */
/*  */
/* th { */
/* color: purple; */
/* } */
/* } */
/* #endregion Interaction effects */
/* } */
/* #endregion Table styling */

output {
  display: block;
  /* min-height: 50%; */

  margin: 0em 1em 1em 0.5em;
  margin-top: 1em !important;
  border: 1px solid transparent;
  /* outline: 1px solid red; */
  width: 100%;
  height: calc(100% - 5em);
  /* min-height:  */
  /* width: 100%; */
  /* min-height: 5em; */

  overflow: auto;
  overflow: auto;
  /* animation: cellReveal 3s linear forwards; */
  text-align: start;
  line-height: 1;

  p {
    display: inline;
    font-size: .9em;

  }

  &:focus {
    background: #eee;
  }

  &:before, &:after {
    opacity: 0;
    pointer-events: none;
  }

  &:before {
    display: block;
    position: absolute;
    top: 0;
    right: 1em;

    /* padding: .5em; */
    font-size: .8em;
    content: counter(category);
    counter-increment: category;
  }
  &:after {
    display: block;
    position: absolute;
    top: 0;
    left: 1em;

    /* padding: .5em; */
    font-size: .8em;
    content: attr(id);
  }
}

@keyframes textReveal {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0% 0;
  }
}

output {
  p {
    background: linear-gradient(to right,
        #000 0%,
        #000 25%,
        #000 70%,
        #f0f 74%,
        #f0f 75%,
        #0000 75%,
        #0000 100%);
    background-clip: text;
    background-repeat: repeat-y;
    background-position: 0% 0;
    background-size: 400% 100%;
    animation: textReveal 10s ease forwards;
    color: transparent;
  }



  p {
    /* margin-top: 1em; */
    &:not(:last-of-type):after {
      display: block;
      visibility: hidden;
      height: 1em;
      content: '';
      strong {
        font-weight: bold;
      }
      em {
        font-style: italic;
      }
      ul {
        margin-left: 1em;
        list-style: disc;
      }
    }
  }
}



body.table td.current ~ td {
  border-color: #eee;

}

body.table td.current {
  border-top: 1ch solid #808;
  /* border-color: #6069; */

  /* outline: 2px solid purple !important; */
  background: #faf0f9;
  padding-left: 1em;

  article {
    display: none;
    opacity: 0;
    height: 0;
  }

  header {
    opacity: 1;
    .level {}
  }



  article {
    /* display: block !important; */
  }
}


body.table td.open {
  z-index: 99;
  /* background: red !important; */
  output, article {
    display: block;
    flex: 1 !important;
  }
  output {
    border-color: #ddd;
  }
}


body.table td.open:not(.cell) {
  margin-top: -0ch;
}

body.table td.open.cell {
  background: #fff;
}

body.table td.open {}
body.table td.cell, body.table td.open {
  right: 1rem;
  left: 15ch;

  /* justify-content: space-between; */
  /* border-radius: 1em; */
  /* width: 60vw; */
  /* height: 50vh; */


  z-index: 999;
  margin-top: -2em;
  /* margin-right: 1em; */
  margin-bottom: 3em;
  /* margin-left: 1em; */
  width: 16em;
  width: 25vw;
  /* height: 4em; */

  header {
    display: block;
    flex-basis: 100%;
    /* background: orange; */
    opacity: 1;
    /* height: 4em; */
    padding: 1.5rem 1rem 0 1rem;
    width: 100%;
    font-size: 1.25em;
    .importance {
      transition: all .2s linear;
      opacity: 0;
    }
    /* height: 1em; */
  }

  output, article {
    flex: 1;
  }
  output {
    display: block;
    flex: 0;
    margin-top: 1vw;
    /* height: 50vh; */
    /* height: 1em; */
    padding: 1rem;
    /* transition: all 10s linear; */
    /* width: 100%; */
    /* width: 5em; */
    /* height: 2em; */
    /* height: 100%; */
    /* background: purple; */
    font-size: 1.1em;

    /* width: */


    strong {
      display: block;
      margin-top: 35%;
      color: #888;
      font-size: 1rem;
    }
  }
  article {
    display: block !important;
    position: static;
    /* transition: all 10s linear; */
    align-self: flex-start;
    opacity: 1;
    /* margin: 1em; */
    margin-top: .2rem;
    margin-left: .2rem;
    padding: 1em;
    /* width: 50%; */
    /* width: 100%; */
    /* height: 100%; */
    color: #666;
    justify-self: flex-start;
    .button {
      display: block;
      margin-top: 1.5em;
      background: #eee;
      padding: 1em;
      text-align: center;
      color: #555;
      font-weight: 500;
      em {
        color: #808;
      }
    }
    /* height: 1em; */
  }
}


body.table table {

  /* transition: all 10s linear; */

  /* &:hover { */
  /* grid-template-rows: .5fr .5fr .5fr 10fr .5fr .5fr .5fr .5fr; */
  /* grid-template-columns: 13ch .5fr .5fr 10fr .5fr; */
  td.cell {
    filter: drop-shadow(0 0 1em #8888);
    border: 1px solid #8888;
    border-radius: .5em;
    background: #fff;

    /* width: 50vw; */
    .importance {
      opacity: 1 !important;
    }
    output, article {
      opacity: 1;

    }
  }
  /* } */
}






table {
  counter-reset: category 0;
}









td.open {
  margin-right: -50vw !important;
  padding: 0 !important;
  width: calc(50vw - 1em) !important;
  /* max-width: 100vw !important; */
  /* height: unset !important; */
  /* height: 100%; */
  height: 50vh !important;
  /* height: 50em; */
  /* min-height: 25vh;; */
  /* min-height: 50vh; */

  .input-container {
    display: block !important;
  }
  &:hover + tz {
    /* width: calc(vw - 1em) !important; */
    /* transform: translate(1em, 0em); */
    z-index: 99;
    outline: 1px dashed #f0f;
    background: #f0f2;
    height: calc(100% - 1em);
    /* margin-right: 0 !important; */
  }




}






body.table {
  .input-container {
    display: none;
    position: absolute;
    right: calc(1em + 2px);
    bottom: calc(1.5em + 4px);
    /* outline: 1px solid red; */
    /* background: #fff; */
    width: calc(50% - 1em - 4px);
  }




}









.tool-toggle {
  display: flex;
  /* display: none; */
  position: fixed;
  bottom: 3em;
  align-items: center;
  margin-right: 10px;
  border-radius: 4px;
  background: #f5f5f5;
  padding: 4px 8px;
  gap: 8px;
}

.tool-toggle input[type="radio"] {
  margin: 0;
  cursor: pointer;
  all: unset;
  appearance: auto;
  -webkit-appearance: radio;
  -moz-appearance: radio;
}

.tool-toggle label {
  margin-right: 4px;
  cursor: pointer;
  color: #666;
  font-size: 12px;
  user-select: none;
}

.tool-toggle label:hover {
  color: #333;
}

.tool-instructions {
  display: inline-block;
  margin-left: 8px;
}

.tool-instructions input {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 4px 8px;
  width: 200px;
  font-size: 12px;
}

.tool-instructions input:focus {
  outline: none;
  border-color: #1976d2;
}




.object {
  display: inline;
  position: relative;
  transition: all 0.3s;
  border-bottom: 2px solid #7e57c2;
  border-radius: 4px;
  background-color: #ede7f6;
  cursor: pointer;
  padding: 3px 6px;
  color: #4527a0;
  font-weight: 600;
}

.object.active {
  border-color: #4527a0;
  background-color: #7e57c2;
  color: white;
}

.object.left::before,
.object.right::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.3s;
  opacity: 0;
  border-radius: 50%;
  background-color: #7e57c2;
  width: 8px;
  height: 8px;
  content: '';
}

.object.left::before {
  left: -4px;
}

.object.right::after {
  right: -4px;
}

.object.active.left::before,
.object.active.right::after {
  opacity: 1;
}

svg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999999;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.line {
  opacity: 0.8;
  stroke: #9575cd;
  stroke-width: 3;
  fill: none;
}

.line.primary {
  opacity: 1;
  stroke: #673ab7;
  stroke-width: 4;
}

.line.originTop, .line.originBottom,
.line.targetTop, .line.targetBottom {
  stroke-dasharray: 4, 4;
}

.line-label {
  background: white;
  padding: 2px 4px;
  white-space: nowrap;
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  fill: #5e35b1;
  text-anchor: middle;
  pointer-events: none;
}

.line-label.primary {
  font-weight: bold;
  fill: #4527a0;
}

.preview .line:not(.primary) {
  opacity: 0.2;
}

.visible {
  z-index: 5;
}

.visiblez {
  z-index: 4;
}

.paragraph-container {
  position: relative;
  margin-bottom: 2.2em;
  max-width: 95%;
}

.line-label-bg {
  opacity: 0.9;
  fill: white;
  stroke: white;
  stroke-width: 4;
  rx: 4;
}