ixbrl-viewer 1.4.1__py3-none-any.whl → 1.4.86__py3-none-any.whl

iXBRLViewerPlugin/viewer/src/less/inspector.less

@@ -3,6 +3,7 @@
 @import url("core.less");
 @import url("fonts.less");
 @import url("colours.less");
+@import url("colours-dark-mode.less");
 @import url("common.less");
 @import (reference) "components.less";
 @import url("form-controls.less");
@@ -15,522 +16,652 @@
 @import (reference) "text-mixins.less";
 @import url("block-list.less");
 @import url("validation-report.less");
+@import url("calculation-inspector.less");
 @import url("text-block-viewer.less");
 @import url("summary.less");
 
 @top-bar-height: 3.5rem;
 
-#ixv {
-  /* Specify these here, not on body in case the iXBRL document has its own
-   * style attribute */
-  &,
-  table {
-    .default-font();
-    .text-md();
+:root {
+  --colour-bg-selected: @colour-bg-selected;
+  --colour-bg-tag: @colour-bg-tag;
+  --colour-bg: @colour-bg;
+  --colour-bg-fade: @colour-bg-fade;
+  --colour-border-grey: @colour-border-grey;
+  --colour-button-bg: @colour-button-bg;
+  --colour-button-primary-bg: @colour-button-primary-bg;
+  --colour-button-primary-border: @colour-button-primary-border;
+  --colour-foreground: @colour-foreground;
+  --colour-highlight-1: @colour-highlight-1;
+  --colour-highlight-2: @colour-highlight-2;
+  --colour-highlight-3: @colour-highlight-3;
+  --colour-highlight-4: @colour-highlight-4;
+  --colour-highlight-5: @colour-highlight-5;
+  --colour-highlight-default: @colour-highlight-default;
+  --colour-icon-grey: @colour-icon-grey;
+  --colour-linked-fact: @colour-linked-fact;
+  --colour-loader: @colour-loader;
+  --colour-primary-focus: @colour-primary-focus;
+  --colour-primary: @colour-primary;
+  --colour-related-fact: @colour-related-fact;
+  --colour-row-odd: @colour-row-odd;
+  --colour-row-hover: @colour-row-hover;
+  --colour-text-form-value: @colour-text-form-value;
+  --colour-text-light: @colour-text-light;
+  --colour-text-title: @colour-text-title;
+  --colour-text: @colour-text;
+  --colour-warning: @colour-warning;
+  --top-bar-height: @top-bar-height;
+
+  .only-dark {
+    display: none;
   }
+}
 
-  #ixv-progress {
-    position: fixed;
-    top: 20px;
-    left: 20px;
-    width: 500px;
-    height: 200px;
-    background-color: #fff;
-    border: solid #000 1px;
-    text-align: center;
+:root[data-ixbrl-viewer-theme="dark"] {
+  --colour-bg-selected: @colour-bg-selected-d;
+  --colour-bg-tag: @colour-bg-tag-d;
+  --colour-bg: @colour-bg-d;
+  --colour-bg-fade: @colour-bg-fade-d;
+  --colour-border-grey: @colour-border-grey-d;
+  --colour-button-bg: @colour-button-bg-d;
+  --colour-button-primary-bg: @colour-button-primary-bg-d;
+  --colour-button-primary-border: @colour-button-primary-border-d;
+  --colour-foreground: @colour-foreground-d;
+  --colour-highlight-1: @colour-highlight-1-d;
+  --colour-highlight-2: @colour-highlight-2-d;
+  --colour-highlight-default: @colour-highlight-default-d;
+  --colour-icon-grey: @colour-icon-grey-d;
+  --colour-linked-fact: @colour-linked-fact-d;
+  --colour-loader: @colour-loader-d;
+  --colour-primary-focus: @colour-primary-focus-d;
+  --colour-primary: @colour-primary-d;
+  --colour-related-fact: @colour-related-fact-d;
+  --colour-row-odd: @colour-row-odd-d;
+  --colour-row-hover: @colour-row-hover-d;
+  --colour-text-form-value: @colour-text-form-value-d;
+  --colour-text-light: @colour-text-light-d;
+  --colour-text-title: @colour-text-title-d;
+  --colour-text: @colour-text-d;
+  --colour-warning: @colour-warning-d;
+  --top-bar-height: @top-bar-height;
+
+  .only-dark {
+    display: initial;
   }
 
-  #viewer-pane {
-    width: 75%;
-    box-sizing: border-box;
-    position: fixed;
-    left: 0;
-    top: @top-bar-height;
-    bottom: 0;
-    z-index: 0;
-    display: flex;
-    flex-flow: column;
+  .only-light {
+    display: none;
+  }
+}
 
-    .ixds-tabs {
-      display: none;
-      flex: 0 1 auto;
-    }
+body,
+table,
+dialog,
+button {
+  .default-font();
+  .text-md();
+}
 
-    #iframe-container {
-      position: relative;
-      flex: 1 1 auto;
+a {
+  text-decoration: none;
+  color: var(--colour-primary);
 
-      & > iframe {
-        width: 100%;
-        height: 100%;
-        box-sizing: border-box;
-        border: none;
-      }
+  &:hover {
+    text-decoration: underline;
+  }
+}
 
-      .zoom-in,
-      .zoom-out,
-      .print {
-        position: absolute;
-        right: 30px;
-        width: 20px;
-        height: 20px;
-        border: solid 1px #bbb;
-        background-color: rgb(225 225 225 / 70%);
-        justify-content: center;
-        display: flex;
-        align-items: center;
-        color: #777;
-        cursor: pointer;
-        user-select: none;
-      }
+#ixv-progress {
+  position: fixed;
+  top: 20px;
+  left: 20px;
+  width: 500px;
+  height: 200px;
+  background-color: var(--colour-bg);
+  border: solid #000 1px;
+  text-align: center;
+}
 
-      .zoom-in {
-        top: 15px;
-      }
+#viewer-pane {
+  width: 75%;
+  box-sizing: border-box;
+  position: fixed;
+  left: 0;
+  top: var(--top-bar-height);
+  bottom: 0;
+  z-index: 1;
+  display: flex;
+  flex-flow: column;
+
+  .ixds-tabs {
+    display: none;
+    flex: 0 1 auto;
+  }
 
-      .zoom-out {
-        top: 40px;
-      }
+  #iframe-container {
+    background-color:white;
+    color:black;
+    position: relative;
+    flex: 1 1 auto;
 
-      .print {
-        top: 75px;
+    & > iframe {
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+      border: none;
+    }
 
-        &::after {
-          .icon-print();
+    .zoom-in,
+    .zoom-out,
+    .print {
+      position: absolute;
+      right: 30px;
+      width: 20px;
+      height: 20px;
+      border: solid 1px #bbb;
+      background-color: rgb(225 225 225 / 70%);
+      justify-content: center;
+      display: flex;
+      align-items: center;
+      color: #777;
+      cursor: pointer;
+      user-select: none;
+    }
 
-          font-size: 20px;
-        }
-      }
+    .zoom-in {
+      top: 15px;
+    }
 
-      .zoom-in:hover,
-      .zoom-out:hover,
-      .print:hover {
-        background-color: rgb(128 128 128 / 70%);
-      }
+    .zoom-out {
+      top: 40px;
     }
 
-    .resize {
-      position: absolute;
-      top: 0;
-      width: 5px;
-      right: -5px;
-      bottom: 0;
-      z-index: 20;
+    .print {
+      top: 75px;
+
+      &::after {
+        .icon-print();
+
+        font-size: 20px;
+      }
     }
 
-    /* This spacer stops drag events getting lost to the iframe */
-    .resize-spacer {
-      position: absolute;
-      top: 0;
-      width: 3px;
-      right: 0;
-      bottom: 0;
-      z-index: 20;
+    .zoom-in:hover,
+    .zoom-out:hover,
+    .print:hover {
+      background-color: rgb(128 128 128 / 70%);
     }
   }
 
-  #top-bar {
-    .default-font();
-    .text-md();
+  .resize {
+    position: absolute;
+    top: 0;
+    width: 5px;
+    right: -5px;
+    bottom: 0;
+    z-index: 20;
+  }
 
-    color: @text;
-    position: fixed;
+  /* This spacer stops drag events getting lost to the iframe */
+  .resize-spacer {
+    position: absolute;
     top: 0;
-    left: 0;
+    width: 3px;
     right: 0;
-    height: @top-bar-height;
-    border-bottom: solid 1px #ccc;
-    z-index: 5;
+    bottom: 0;
+    z-index: 20;
+  }
+}
 
-    .header {
-      position: absolute;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      height: 100%;
-    }
+#top-bar {
+  .default-font();
+  .text-md();
+
+  display: flex;
+  align-items: center;
+  color: var(--colour-text);
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: var(--top-bar-height);
+  border-bottom: solid 1px #ccc;
+  z-index: 5;
+
+  #home-link {
+    font-size: 2.2rem;
+    font-weight: bold;
+    margin-left: 1rem;
+    margin-right: 1rem;
+  }
 
-    .document-title {
-      position: absolute;
-      box-sizing: border-box;
-      left: 160px;
-      top: 0;
-      padding-right: 1.6rem;
-      padding-top: 1.3rem;
-      border-right: solid 0.1rem #ccc;
-      height: @top-bar-height;
-      overflow: hidden;
-    }
+  .header {
+    height: 100%;
+  }
 
-    .top-bar-controls {
-      position: absolute;
-      right: 1.8rem;
-      top: 0;
-      line-height: @top-bar-height;
+  .document-title {
+    box-sizing: border-box;
+    padding-right: 1.6rem;
+    line-height: var(--top-bar-height);
+    border-right: solid 0.1rem #ccc;
+    height: var(--top-bar-height);
+    overflow: hidden;
+    font-size: inherit;
+    font-weight: inherit;
+    margin: 0;
+  }
+
+  .top-bar-controls {
+    position: absolute;
+    display: flex;
+    right: 0;
+    top: 0;
+    line-height: var(--top-bar-height);
+    height: var(--top-bar-height);
+    background: var(--colour-bg);
+    padding-left: 1.8rem;
+
+    & > * {
+      margin-right: 0.8rem;
+    }
 
+    .horizontal-menu {
       * {
         vertical-align: middle;
       }
 
-      .content {
-        input {
-          position: relative;
-          top: -0.1rem;
-          margin-right: 0.6rem;
-        }
+      .content > * {
+        position: relative;
+        top: -0.1rem;
+        margin-right: 0.6rem;
       }
+    }
 
-      .highlight-key {
-        margin-left: 0.6rem;
-        margin-right: 1.5rem;
-        position: relative;
 
-        &::before {
-          .icon-question();
+    .highlight-key {
+      margin-left: 0.6rem;
+      margin-right: 1.5rem;
+      position: relative;
 
-          font-size: 1.6rem;
-        }
+      &::before {
+        .icon-question();
 
-        .popup-content {
+        font-size: 1.6rem;
+      }
+
+      .popup-content {
+        position: absolute;
+        top: 3.2rem;
+        left: -2rem;
+        background: white;
+        color: black;
+        border: solid 1px black;
+        border-radius: 0.3rem;
+        line-height: 1.6rem;
+
+        .arrow {
           position: absolute;
-          top: 3.2rem;
-          left: -2rem;
-          background: #fff;
-          border: solid 1px @text;
-          border-radius: 0.3rem;
-          line-height: 1.6rem;
-
-          .arrow {
-            position: absolute;
-            top: 0;
-            left: 1.1rem;
-            width: 1.5rem;
-            height: 1.5rem;
-            border-top: solid 0.1rem @text;
-            border-left: solid 0.1rem @text;
-            transform: translate(50%, -50%) rotate(45deg);
-            background: #fff;
+          top: 0;
+          left: 1.1rem;
+          width: 1.5rem;
+          height: 1.5rem;
+          border-top: solid 0.1rem black;
+          border-left: solid 0.1rem black;
+          transform: translate(50%, -50%) rotate(45deg);
+          background: white;
+        }
+
+        .item {
+          white-space: nowrap;
+          margin: 1rem;
+          position: relative;
+
+          .sample {
+            display: inline-block;
+            width: 3.2rem;
+            height: 1.6rem;
+            margin-right: 1rem;
           }
 
-          .item {
-            white-space: nowrap;
-            margin: 1rem;
-            position: relative;
-
-            .sample {
-              display: inline-block;
-              width: 3.2rem;
-              height: 1.6rem;
-              margin-right: 1rem;
-            }
+          .sample-0 {
+            background: var(--colour-highlight-default);
+          }
 
-            .sample-0 {
-              background: @highlight-default;
-            }
+          .sample-1 {
+            background: var(--colour-highlight-1);
+          }
 
-            .sample-1 {
-              background: @highlight-1;
-            }
+          .sample-2 {
+            background: var(--colour-highlight-2);
+          }
 
-            .sample-2 {
-              background: @highlight-2;
-            }
+          .sample-3 {
+            background: var(--colour-highlight-3);
           }
-        }
-      }
 
-      .validation-warning {
-        margin-left: 0.5rem;
-        font-size: 1.6rem;
-        display: none;
-        cursor: pointer;
+          .sample-4 {
+            background: var(--colour-highlight-4);
+          }
 
-        &::before {
-          .icon-warning();
+          .sample-5 {
+            background: var(--colour-highlight-5);
+          }
         }
       }
     }
-  }
 
-  #inspector {
-    display: flex;
-    flex-direction: column;
+    .validation-warning {
+      margin-left: 0.5rem;
+      font-size: 1.6rem;
+      display: none;
+      cursor: pointer;
 
-    h1,
-    h2,
-    h3 {
-      font-weight: normal;
-      border-bottom: solid 1px @border-grey;
-      width: 100%;
-      box-sizing: border-box;
-      padding-bottom: 5px;
-      color: @text-title;
+      &::before {
+        .icon-warning();
+      }
     }
 
-    h2 {
-      text-align: center;
-    }
+    #toggle-dark-mode {
+      border: none;
 
-    h3 {
-      .text-md();
-    }
+      &::before {
+        .icon-dark-mode();
 
-    h4 {
-      font-weight: bold;
-      color: @text-title;
-      margin-bottom: 1.4em;
+        cursor: pointer;
+      }
     }
 
-    #inspector-head {
-      padding: 0;
-      position: relative;
-      border-bottom: solid 1px @border-grey;
+    .menu .menu-title::before {
+      .icon-cog();
 
-      .title {
-        text-align: center;
-        position: relative;
-        border-bottom: @simple-border;
+      font-size: 2rem;
+    }
+  }
+}
 
-        h1 {
-          margin: 0.8rem 0;
-          border: none;
-          padding: 0;
-          font-size: 1.8rem;
-          line-height: 3.2rem;
-        }
+#inspector {
+  display: flex;
+  flex-direction: column;
 
-        .back {
-          .square-button-bare();
+  h1,
+  h2,
+  h3 {
+    font-weight: normal;
+    width: 100%;
+    box-sizing: border-box;
+    color: var(--colour-text-title);
+  }
 
-          top: 0;
-          left: 0;
-          position: absolute;
+  h2 {
+    text-align: center;
+    font-size: 1.8rem;
+    line-height: 3.2rem;
+    margin: 0.8rem 0;
+  }
 
-          &::before {
-            .icon-chevron-left();
-          }
-        }
+  h3 {
+    .text-md();
+  }
 
-        .menu {
-          top: 0;
-          right: 0;
-          position: absolute;
+  h4 {
+    font-weight: bold;
+    color: var(--colour-text-title);
+    margin-bottom: 1.4em;
+  }
 
-          .menu-title::before {
-            .icon-cog();
+  #inspector-head {
+    padding: 0;
+    position: relative;
+    border-bottom: solid 1px var(--colour-border-grey);
 
-            font-size: 2rem;
-          }
-        }
-      }
+    .controls {
+      position: relative;
+      height: 3.2rem;
+      padding: 0.8rem 0.9rem;
+      display: flex;
 
-      .controls {
-        position: relative;
-        height: 3.2rem;
+      & > * {
         margin: 0.8rem 0.9rem;
+      }
 
-        .search-button {
-          .square-button();
-
-          position: absolute;
-          top: 0;
-          left: 7.7rem;
+      .search-button {
+        .square-button();
 
-          &::before {
-            .icon-search();
+        &::before {
+          .icon-search();
 
-            position: relative;
-          }
+          position: relative;
         }
+      }
 
-        .outline-button {
-          .square-button();
+      .outline-button {
+        .square-button();
 
-          position: absolute;
-          top: 0;
-          left: 3.6rem;
+        &::before {
+          .icon-outline();
 
-          &::before {
-            .icon-outline();
+          position: relative;
+        }
+      }
 
-            position: relative;
-          }
+      .summary-button {
+        .square-button();
+
+        &::before {
+          .icon-summary();
+
+          position: relative;
         }
+      }
 
-        .summary-button {
-          .square-button();
+      .ixbrl-prev-tag {
+        .square-button();
 
-          position: absolute;
-          top: 0;
-          left: 0;
+        margin-left: auto;
 
-          &::before {
-            .icon-summary();
+        &::before {
+          .icon-chevron-left();
+        }
+      }
 
-            position: relative;
-          }
+      .ixbrl-next-tag {
+        .square-button();
+
+        &::before {
+          .icon-chevron-right();
         }
+      }
+    }
+  }
 
-        .next-prev {
-          position: absolute;
-          top: 0;
-          right: 0;
+  .inspector-container {
+    flex-grow: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
 
-          .ixbrl-next-tag,
-          .ixbrl-prev-tag {
-            .square-button();
+    .inspector-title {
+      text-align: center;
+      position: relative;
+      margin: 0.8rem 0;
 
-            position: relative;
-            display: inline-block;
-          }
+      h2 {
+        margin: 0;
+        padding: 0;
+      }
 
-          .ixbrl-next-tag::before {
-            .icon-chevron-right();
-          }
+      .back {
+        .square-button-bare();
 
-          .ixbrl-prev-tag::before {
-            .icon-chevron-left();
-          }
+        top: 0;
+        left: 0.9rem;
+        position: absolute;
+
+        &::before {
+          .icon-chevron-left();
         }
       }
+    }
 
-      .search-controls {
-        margin: 0.8rem 0.9rem;
+    .search-controls {
+      margin: 0 0 0.8rem;
 
-        .search-input {
-          display: flex;
-          padding: 0;
+      .search-input {
+        display: flex;
+        padding: 0 0.9rem;
 
-          input#ixbrl-search {
-            flex-grow: 1;
-            margin-right: 1rem;
-          }
+        input#ixbrl-search {
+          flex-grow: 1;
+          margin-right: 1rem;
+        }
 
-          .filter-toggle {
-            .square-button();
+        .filter-toggle {
+          .square-button();
 
-            &::before {
-              .icon-filter();
-            }
+          &::before {
+            .icon-filter();
           }
         }
+      }
 
-        &:not(.show-filters) .search-filters {
-          display: none;
-        }
+      .filter-info {
+        text-align: center;
+        font-style: italic;
+        margin-top: 0.8rem;
+        position: relative;
+
+        .reset {
+          .bare-button();
+          .text-md();
 
-        &.show-filters .filter-toggle {
-          color: @primary;
+          position: absolute;
+          right: 0.8rem;
+          top: -0.3rem;
         }
+      }
 
-        .search-filters {
-          position: relative;
-          // Ensure the filter pane never grows too large to hide the results pane
-          max-height: 60vh;
-          overflow-y: auto;
+      &:not(.show-filters) .search-filters {
+        display: none;
+      }
 
-          .reset {
-            .clickable();
+      &.active-filters .filter-toggle {
+        color: var(--colour-primary);
+      }
 
-            position: absolute;
-            right: 0;
-            top: 0;
-          }
+      &:not(.active-filters) .reset {
+        display: none;
+      }
 
-          h3 {
-            border: none;
-            font-weight: bold;
-            padding-bottom: 0;
-          }
+      .search-filters {
+        position: relative;
+        // Ensure the filter pane never grows too large to hide the results pane
+        max-height: 60vh;
+        overflow-y: auto;
+        padding: 0 0.9rem;
 
-          .filter-group {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: space-between;
-            margin-bottom: 0.4em;
 
-            .control-label {
-              white-space: nowrap;
-              margin-right: 2em;
-              width: 6em;
-            }
+        h3 {
+          border: none;
+          font-weight: bold;
+          padding-bottom: 0;
 
-            input,
-            select,
-            textarea {
-              flex-basis: 12em;
-              flex-grow: 2;
-            }
+          button {
+            font-weight: inherit;
           }
+        }
+
+        .filter-group {
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-between;
+          margin-bottom: 0.4em;
 
           .control-label {
-            font-weight: bold;
-            margin-bottom: 0.6em;
-            margin-top: 0.8em;
+            white-space: nowrap;
+            margin-right: 2em;
+            width: 6em;
           }
 
-          select {
-            width: 100%;
+          input,
+          select,
+          textarea {
+            flex-basis: 12em;
+            flex-grow: 2;
           }
+        }
 
-          .checkboxes {
-            display: flex;
-            flex-wrap: wrap;
+        .control-label {
+          font-weight: bold;
+          margin-bottom: 0.6em;
+          margin-top: 0.8em;
+        }
 
-            & > div {
-              margin: 1.2rem 0;
-              flex-grow: 1;
+        select {
+          width: 100%;
+        }
 
-              input {
-                vertical-align: middle;
-              }
+        .checkboxes {
+          display: flex;
+          flex-wrap: wrap;
+
+          & > div {
+            margin: 1.2rem 0;
+            flex-grow: 1;
+
+            input {
+              vertical-align: middle;
             }
           }
+        }
 
-          .filter-info {
-            text-align: center;
-            font-style: italic;
-            font-size: 1.1rem;
-          }
+
+        .datatype-conflict-warning {
+          margin: 1rem 0;
+          color: var(--colour-warning);
+          display: none;
         }
       }
     }
 
     .inspector-body {
-      flex-grow: 1;
+      border-top: solid 1px var(--colour-border-grey);
       width: 100%;
       position: relative;
-      overflow: hidden;
+      overflow-y: auto;
+      flex-grow: 1;
 
       .no-fact-overlay,
       .no-outline-overlay {
-        display: block;
         position: absolute;
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%);
         width: 80%;
         text-align: center;
-        color: @text-light;
+        color: var(--colour-text-light);
 
         .no-fact-overlay-icon::before {
           .icon-tag();
 
           font-size: 10rem;
+          line-height: normal;
         }
 
         .no-outline-overlay-icon::before {
           .icon-outline();
 
           font-size: 10rem;
+          line-height: normal;
         }
 
         .title {
           font-size: x-large;
+          line-height: normal;
         }
       }
 
-      .inspector-body-fact {
+      .inspector-body {
         overflow-y: auto;
         height: 100%;
         position: relative;
@@ -546,12 +677,13 @@
           position: absolute;
           top: 50%;
           left: 50%;
-          color: @text-light;
+          color: var(--colour-text-light);
           width: 85%;
 
           .search-overlay-icon {
             text-align: center;
             font-size: 10rem;
+            line-height: normal;
 
             &::before {
               .icon-search();
@@ -561,26 +693,15 @@
           .search-overlay-text {
             text-align: center;
             font-size: medium;
+            line-height: normal;
 
             .title {
               font-size: x-large;
+              line-height: normal;
             }
           }
         }
 
-        .select-icon {
-          float: right;
-          .square-button();
-          .clickable();
-
-          &:first-of-type {
-            margin-left: 0.5rem;
-          }
-
-          &::before {
-            .icon-select();
-          }
-        }
 
         .more-results {
           .clickable();
@@ -604,296 +725,330 @@
         .panel-indent();
       }
     } /* inspector body */
+  } /* inspector container */
 
-    .std-label {
-      margin-left: 30px;
-      min-height: 20px;
-      position: relative;
+  .std-label {
+    margin-left: 30px;
+    min-height: 20px;
+    position: relative;
 
-      &::before {
-        color: @primary;
-        content: "\2022";
-        position: absolute;
-        top: -5px;
-        left: -20px;
-        font-size: x-large;
-      }
+    &::before {
+      color: var(--colour-primary);
+      content: "\2022";
+      position: absolute;
+      left: -20px;
+      font-size: x-large;
     }
+  }
 
-    #concept {
-      margin-top: 20px;
-      font-size: small;
-      min-height: 25px;
-    }
+  dt {
+    font-weight: bold;
+    color: var(--colour-text-title);
+    margin-bottom: 1.4rem;
+    margin-top: 1.4rem;
+  }
 
-    #dimensions {
-      margin-left: 2rem;
-      margin-right: 2rem;
-      margin-bottom: 1rem;
+  dd {
+    margin-inline-start: 2rem;
+  }
 
-      .dimension {
-        position: relative;
-        margin: 1.5rem 0 1.5rem 1rem;
+  #concept {
+    margin-top: 20px;
+    font-size: small;
+    min-height: 25px;
+  }
 
-        &::before {
-          .icon-dimension();
+  #dimensions {
+    margin-left: 2rem;
+    margin-right: 2rem;
+    margin-bottom: 1rem;
 
-          color: @primary;
-          position: absolute;
-          top: 0;
-          left: -2.3rem;
-          font-size: 120%;
-        }
+    .dimension {
+      position: relative;
+      margin: 1.5rem 0 1.5rem 1rem;
+
+      &::before {
+        .icon-dimension();
+
+        color: var(--colour-primary);
+        position: absolute;
+        top: 0;
+        left: -2.3rem;
+        font-size: 120%;
       }
+    }
 
-      .dimension-value {
-        position: relative;
-        margin: 1.5rem 0 1.5rem 3.5rem;
+    .dimension-value {
+      position: relative;
+      margin: 1.5rem 0 1.5rem 3.5rem;
 
-        &::before {
-          .icon-dimension-member();
+      &::before {
+        .icon-dimension-member();
 
-          position: absolute;
-          color: @primary;
-          top: 0;
-          left: -2.3rem;
-          font-size: 120%;
-        }
+        position: absolute;
+        color: var(--colour-primary);
+        top: 0;
+        left: -2.3rem;
+        font-size: 120%;
       }
     }
+  }
 
-    .analyse {
-      cursor: pointer;
-      padding-left: 0.7rem;
-      color: @primary;
-    }
+  .inline-button {
+    display: inline;
+    cursor: pointer;
+    color: var(--colour-primary);
+    padding: 0.3rem;
+    border: none;
+  }
 
-    .analyse::before {
-      .icon-graph();
+  .analyse {
+    margin-left: 0.4rem;
+  }
 
-      position: relative;
-      top: 1px;
-    }
+  .analyse::before {
+    .icon-graph();
 
-    .hidden-fact-tag,
-    .html-hidden-fact-tag {
-      .tag();
+    position: relative;
+    top: 1px;
+  }
 
-      position: absolute;
-      top: 1.5rem;
-      right: 0.9rem;
+  .inspector-body .tags {
+    position: absolute;
+    top: 1.5rem;
+    right: 0.9rem;
+  }
 
-      &.html-hidden-fact-tag {
-        background-color: #c63018;
-      }
-    }
+  .target-document-tag {
+    .tag();
+  }
 
-    table.fact-properties {
-      table-layout: fixed;
-      width: 100%;
+  .hidden-fact-tag,
+  .html-hidden-fact-tag {
+    .tag();
 
-      th {
-        width: 75px;
-        text-align: right;
-        padding-right: 20px;
-        color: @text-title;
-      }
+    &.html-hidden-fact-tag {
+      background-color: #c63018;
+    }
+  }
 
-      th,
-      td {
-        padding-top: 2px;
-        padding-bottom: 2px;
-      }
 
-      tr.value {
-        .show-all {
-          color: @primary;
-          cursor: pointer;
-        }
+  .duplicates {
+    text-align: center;
+    width: 100%;
+    height: 3.2rem;
+    line-height: 3.2rem;
 
-        &:not(.truncated) .show-all {
-          display: none;
-        }
+    & > * {
+      vertical-align: middle;
+    }
 
-        &.text-block .expand-text-block {
-          color: @primary;
-          cursor: pointer;
+    .text {
+      margin: 0 5px;
+    }
 
-          &::before {
-            .icon-text-block();
-          }
-        }
-      }
+    .next,
+    .prev {
+      .square-button-bare();
 
-      td {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        color: @text-form-value;
-      }
+      position: relative;
+      display: inline-block;
+    }
 
-      tr.uri > td {
-        white-space: nowrap;
-      }
+    .prev::before {
+      .icon-chevron-left();
     }
 
-    .duplicates {
-      text-align: center;
-      width: 100%;
-      height: 3.2rem;
-      line-height: 3.2rem;
+    .next::before {
+      .icon-chevron-right();
+    }
+  }
 
-      & > * {
-        vertical-align: middle;
-      }
+  .concept td > div {
+    display: flex;
+
+    span.text {
+      white-space: nowrap;
+      position: relative;
+      flex-shrink: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
 
-      .text {
-        margin: 0 5px;
-      }
+    span.filler {
+      width: 0.7rem;
+      display: inline-block;
+      flex-shrink: 1000;
+    }
 
-      .next,
-      .prev {
-        .square-button-bare();
+    span.copy-icon {
+      flex-shrink: 0;
+    }
+  }
 
-        position: relative;
-        display: inline-block;
-      }
+  .documentation {
+    margin-top: 10px;
+    margin-left: 30px;
+    font-style: italic;
+    font-family: serif;
+  }
 
-      .prev::before {
-        .icon-chevron-left();
-      }
+  width: 25%;
+  position: absolute;
+  top: var(--top-bar-height);
+  right: 0;
+  bottom: 0;
+  box-sizing: border-box;
+  overflow: hidden;
+  border-left: solid 0.1rem var(--colour-border-grey);
+
+  .inspector-section {
+    padding-left: 0.9rem;
+    padding-right: 0.9rem;
+  }
 
-      .next::before {
-        .icon-chevron-right();
-      }
+  .collapsible-section {
+    .collapsible-body {
+      .panel-indent();
     }
 
-    .concept td > div {
-      display: flex;
+    .collapsible-header {
+      position: relative;
+      padding: 0 0 0.5rem 1.2rem;
+      cursor: pointer;
+      user-select: none;
+      white-space: nowrap;
+      border-bottom: solid 1px var(--colour-border-grey);
 
-      span.text {
-        white-space: nowrap;
-        position: relative;
-        flex-shrink: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
+      button:first-of-type {
+          .text-md();
 
-      span.filler {
-        width: 0.7rem;
-        display: inline-block;
-        flex-shrink: 1000;
-      }
+          border: none;
+          color: var(--colour-text-title);
+          text-align: left;
+          position: relative;
+          padding: 0.4rem 0.9rem 0.4rem 2.3rem;
+
+          &::before {
+            .icon-chevron-right();
 
-      span.copy-icon {
-        flex-shrink: 0;
+            font-size: 1.8rem;
+            position: absolute;
+            top: 0.4rem;
+            left: 0;
+            transform: rotate(90deg);
+            transition: all 0.25s ease;
+            display: inline-block;
+          }
       }
-    }
 
-    .documentation {
-      margin-top: 10px;
-      margin-left: 30px;
-      font-style: italic;
-      font-family: serif;
+      .collapsible-subheader {
+        user-select: none;
+        font-weight: normal;
+        font-style: italic;
+        font-size: 1.3rem;
+        color: var(--colour-text-form-value);
+      }
     }
 
-    width: 25%;
-    position: absolute;
-    top: @top-bar-height;
-    right: 0;
-    bottom: 0;
-    box-sizing: border-box;
-    overflow: hidden;
-    border-left: @simple-border;
-
-    a {
-      text-decoration: none;
-      color: @primary;
+    &.collapsed {
+      .collapsible-header button::before {
+        transform: rotate(0);
+        top: 0.3rem;
+        left: -0.2rem;
+      }
 
-      &:hover {
-        text-decoration: underline;
+      .collapsible-subheader {
+        color: var(--colour-primary);
       }
     }
 
-    .inspector-section {
-      padding-left: 0.9rem;
-      padding-right: 0.9rem;
+    .footnote-details {
+      display: none;
     }
 
-    .collapsible-section {
-      .collapsible-body {
-        .panel-indent();
-      }
-
-      .collapsible-header {
+    .calculations {
+      .card .title {
         position: relative;
-        padding-left: 12px;
-        cursor: pointer;
-        user-select: none;
-        white-space: nowrap;
 
-        &::before {
-          .icon-chevron-right();
-
-          font-size: 1.8rem;
+        .inconsistent-flag {
+          padding-right: 0.75rem;
           position: relative;
-          top: 0.4rem;
-          left: -0.3rem;
-          transform: rotate(90deg);
-          transition: all 0.25s ease;
-          display: inline-block;
-        }
+          top: 0.2rem;
+          color: var(--colour-warning);
 
-        .collapsible-subheader {
-          user-select: none;
-          font-weight: normal;
-          font-style: italic;
-          font-size: 1.3rem;
-          color: @text-form-value;
+          &::before {
+            .icon-circle-cross();
+          }
         }
-      }
 
-      &.collapsed {
-        .collapsible-header::before {
-          transform: rotate(0);
-          top: 0.3rem;
-          left: -0.2rem;
+        .consistent-flag {
+          padding-right: 0.75rem;
+          position: relative;
+          top: 0.2rem;
+          color: var(--colour-primary);
+
+          &::before {
+            .icon-circle-tick();
+          }
         }
 
-        .collapsible-subheader {
-          color: @primary;
+        .unchecked-flag {
+          padding-right: 0.5rem;
+          position: relative;
+          top: 0.2rem;
+
+          &::before {
+            .icon-question();
+          }
         }
-      }
 
-      .footnote-details {
-        display: none;
       }
 
-      .calculations {
-        .item {
-          padding: 5px 0;
-          position: relative;
-          line-height: 1.8rem;
+      table.calculation-table {
+        width: 100%;
+        border-collapse: collapse;
+
+        tr.item {
+          td {
+            padding: 0.2rem 0;
+            line-height: 1.8rem;
+
+            &.weight {
+              text-align: center;
+            }
+
+            &.value {
+              text-align: right;
+            }
+          }
 
           &:not(.calc-fact-link, .total) .concept-name {
             color: #777;
           }
 
-          .concept-name {
-            display: block;
-            margin-left: 15px;
+          &:not(.calc-fact-link) {
+            td {
+              .text-md();
+
+              &.concept-name {
+                // Compensate for padding that gets added by button on clickable rows.
+                padding: 0.3rem;
+              }
+            }
           }
 
           &.calc-fact-link {
             cursor: pointer;
 
-            .concept-name {
-              color: @primary;
-            }
-          }
+            .concept-name,
+            .value {
+              color: var(--colour-primary);
 
-          .weight {
-            display: block;
-            position: absolute;
+              button {
+                .text-md();
+              }
+            }
           }
 
           &.linked-highlight,
@@ -901,229 +1056,393 @@
             .linked-highlight-text();
           }
 
-          &.total {
-            border-top: solid 1px @border-grey;
+          &.total td {
+            border-top: solid 1px var(--colour-border-grey);
             padding-bottom: 1.2rem;
           }
         }
       }
+
+      .calculation-details-link {
+        .inline-button();
+        .text-md();
+      }
     }
+  }
+
+  .resetable-multiselect {
+    position: relative;
 
     .reset-multiselect {
-      float: right;
-      line-height: 0;
-      position: relative;
-      bottom: 1rem;
+      position: absolute;
+      top: -2.5rem;
+      right: -0.5rem;
       cursor: pointer;
+      border: none;
+      padding: 0.3rem;
+
 
       &::after {
         .icon-close();
       }
     }
+  }
 
-    &:not(.no-fact-selected) {
-      .no-fact-overlay {
-        display: none;
-      }
+  &:not(.no-fact-selected) {
+    .no-fact-overlay {
+      display: none;
     }
+  }
 
-    &.no-fact-selected {
-      .fact-selected-only {
-        display: none;
-      }
+  &.no-fact-selected {
+    .fact-selected-only {
+      display: none;
     }
+  }
 
-    &:not(.hidden-fact) {
-      .hidden-fact-tag {
-        display: none;
-      }
+  &:not(.hidden-fact) {
+    .hidden-fact-tag {
+      display: none;
     }
+  }
 
-    &:not(.html-hidden-fact) {
-      .html-hidden-fact-tag {
-        display: none;
-      }
+  &:not(.html-hidden-fact) {
+    .html-hidden-fact-tag {
+      display: none;
     }
+  }
 
-    &.search-mode {
-      #inspector-head {
-        .controls {
-          .search-button {
-            .square-button.primary();
-          }
+  &.search-mode {
+    #inspector-head {
+      .controls {
+        .search-button {
+          .square-button.primary();
         }
       }
     }
+  }
 
-    &.outline-mode {
-      #inspector-head {
-        .controls {
-          .outline-button {
-            .square-button.primary();
-          }
+  &.outline-mode {
+    #inspector-head {
+      .controls {
+        .outline-button {
+          .square-button.primary();
         }
       }
     }
+  }
 
-    &.summary-mode {
-      #inspector-head {
-        .controls {
-          .summary-button {
-            .square-button.primary();
-          }
+  &.summary-mode {
+    #inspector-head {
+      .controls {
+        .summary-button {
+          .square-button.primary();
         }
       }
     }
+  }
 
-    .powered-by {
-      .text-sm();
-
-      text-align: center;
-      flex-shrink: 0;
-      background: #fff;
-      width: 100%;
-      height: 3rem;
-      margin: 0;
-      box-sizing: border-box;
-      border-top: @simple-border;
-      position: relative;
+  .powered-by {
+    .text-sm();
 
-      img {
-        box-sizing: border-box;
-        height: 3rem;
-        padding: 0.5rem;
-      }
+    text-align: center;
+    flex-shrink: 0;
+    background: var(--colour-bg);
+    width: 100%;
+    height: 3rem;
+    margin: 0;
+    box-sizing: border-box;
+    border-top: solid 0.1rem var(--colour-border-grey);
+    position: relative;
 
-      .version {
-        position: absolute;
-        top: 0;
-        right: 5px;
-        font-size: small;
-        line-height: 3rem;
-        color: #999;
-      }
+    img {
+      box-sizing: border-box;
+      height: 3rem;
+      padding: 0.5rem;
     }
 
-    &:not(.search-mode) .search-mode-only {
-      display: none;
+    .version {
+      position: absolute;
+      top: 0;
+      right: 5px;
+      font-size: small;
+      line-height: 3rem;
+      color: var(--colour-text-light);
     }
+  }
 
-    &:not(.outline-mode) .outline-mode-only {
-      display: none;
-    }
+  &:not(.search-mode) .search-mode-only {
+    display: none;
+  }
 
-    &:not(.summary-mode) .summary-mode-only {
-      display: none;
-    }
+  &:not(.outline-mode) .outline-mode-only {
+    display: none;
+  }
 
-    &.search-mode .fact-mode-only,
-    &.summary-mode .fact-mode-only,
-    &.outline-mode .fact-mode-only {
-      display: none;
-    }
+  &:not(.summary-mode) .summary-mode-only {
+    display: none;
+  }
 
-    &:not(.footnote-mode) .footnote-mode-only {
-      display: none;
-    }
+  &.search-mode .fact-mode-only,
+  &.summary-mode .fact-mode-only,
+  &.outline-mode .fact-mode-only {
+    display: none;
+  }
+
+  &:not(.footnote-mode) .footnote-mode-only {
+    display: none;
+  }
+
+  &.footnote-mode .footnote-mode-off {
+    display: none;
+  }
+
+  .failed-to-load-mask {
+    display: none;
+  }
 
-    &.footnote-mode .footnote-mode-off {
+  &.failed-to-load .failed-to-load-mask {
+    display: block;
+    background-color: var(--colour-bg-fade);
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+
+  &.search-ready {
+    .search-not-ready-only {
       display: none;
     }
+  }
 
-    .failed-to-load-mask {
+  &:not(.search-ready) {
+    .search-ready-only {
       display: none;
     }
 
-    &.failed-to-load .failed-to-load-mask {
-      display: block;
+    .search-results {
       background-color: rgb(0 0 0 / 50%);
-      position: absolute;
+    }
+  }
+
+  table.property-table {
+    &:not(.numeric) {
+      table-layout: fixed;
       width: 100%;
-      height: 100%;
     }
 
-    &.search-ready {
-      .search-not-ready-only {
-        display: none;
+    td, th {
+      padding: 0;
+      line-height: 2.6rem;
+    }
+
+    th {
+      width: 90px;
+      text-align: right;
+      padding-right: 30px;
+      color: var(--colour-text-title);
+
+      &.has-tooltip {
+        padding-right: 10px;
       }
     }
 
-    &:not(.search-ready) {
-      .search-ready-only {
+    tr.value {
+      .show-all {
+        color: var(--colour-primary);
+        cursor: pointer;
+      }
+
+      &:not(.truncated) .show-all {
         display: none;
       }
 
-      .search-results {
-        background-color: rgb(0 0 0 / 50%);
+      &.text-block .expand-text-block {
+        color: var(--colour-primary);
+        cursor: pointer;
+
+        &::before {
+          .icon-text-block();
+        }
       }
     }
-  }
 
-  .fact-link {
-    cursor: pointer;
-    color: @primary;
+    td {
+      overflow: clip visible;
+      text-overflow: ellipsis;
+      color: var(--colour-text-form-value);
+    }
+
+    tr.uri > td {
+      white-space: nowrap;
+    }
 
-    &:hover {
-      outline: solid 2px @linked-fact;
-      outline-offset: 1px;
+    &.numeric td {
+      text-align: right;
     }
   }
+}
+
+.fact-link {
+  cursor: pointer;
+  color: var(--colour-primary);
+
+  &:hover {
+    outline: solid 0.125em var(--colour-linked-fact);
+    outline-offset: 0.0625em;
+  }
+}
+
+.fact-list {
+  .fact-list-item {
+    .block-list-item();
+
+    .select-icon {
+      float: right;
+      .square-button();
+      .clickable();
+
+      &:first-of-type {
+        margin-left: 0.5rem;
+      }
+
+      &::before {
+        .icon-select();
+      }
+    }
+
+    .title {
+      color: var(--colour-text-title);
+      font-weight: bold;
+    }
+
+    .dimension {
+      color: var(--colour-text);
+      margin: 0.6rem 0;
+    }
 
-  .fact-list {
-    .fact-list-item {
-      .block-list-item();
+    .datatype {
+      color: var(--colour-text);
+      margin: 0.6rem 0;
+      font-style: italic;
+    }
+
+    .hidden {
+      .tag();
+    }
 
+    &.selected {
       .title {
-        color: @text-title;
         font-weight: bold;
       }
 
       .dimension {
-        color: @text;
-        margin: 0.6rem 0;
+        color: var(--colour-text);
       }
+    }
 
-      .hidden {
-        .tag();
-      }
+  }
+}
 
-      &.selected {
-        .title {
-          font-weight: bold;
-        }
 
-        .dimension {
-          color: @text;
-        }
-      }
-    }
+.dialog-mask {
+  background-color: var(--colour-bg-fade);
+  position: fixed;
+  inset: 0;
+  z-index: 10;
+  display: none;
+}
+
+.popup-content {
+  display: none;
+}
+
+.copy-icon {
+  color: var(--colour-primary);
+  border-radius: 0.3rem;
+
+  &:active {
+    background-color: var(--colour-primary);
+    color: var(--colour-bg);
   }
 
-  .dialog-mask {
-    background-color: rgb(0 0 0 / 60%);
-    position: fixed;
-    inset: 0;
-    z-index: 10;
-    display: none;
+  &::before {
+    .icon-clipboard();
+
+    cursor: pointer;
   }
+}
 
-  .popup-content {
-    display: none;
+.has-tooltip {
+  white-space: nowrap;
+  
+  & > * {
+    vertical-align: middle;
   }
 
-  .copy-icon {
-    color: @primary;
-    border-radius: 0.3rem;
+  .tooltip-icon {
+    .inline-button();
+
+    cursor: help;
+    margin-left: -0.3rem;
+    vertical-align: middle;
 
-    &:active {
-      background-color: @primary;
-      color: #fff;
+    &::after {
+      content: "\24d8"; 
     }
+  }
 
-    &::before {
-      .icon-clipboard();
+  button + .tooltip-icon {
+    margin-left: -1rem;
+  }
+}
 
-      cursor: pointer;
-    }
+.tooltip {
+  position: fixed;
+  visibility: hidden;
+  transition: all 0.5s ease;
+  background-color: var(--colour-bg);
+  z-index: 1;
+  border: solid 0.1rem var(--colour-border-grey);
+  border-radius: 0.4rem;
+  padding: 0.8rem;
+  box-shadow: rgb(0 0 0 / 30%) 0.2rem 0.2rem 0.2rem;
+  font-weight: normal;
+  opacity: 0;
+  cursor: default;
+  color: var(--colour-text);
+  text-align: left;
+
+  &.show,
+  &.hover-show {
+    visibility: visible;
+    opacity: 1;
+    transition: opacity 0.5s ease;
+  }
+
+  &.with-glossary-link .glossary-link {
+    display: block;
+  }
+
+  .glossary-link {
+    margin-top: 0.8rem;
+    font-size: smaller;
+    display: none;
+  }
+}
+
+.fact-value {
+  &.fact-value-invalid {
+    font-style: italic;
+    color: #f00;
+  }
+
+  &.fact-value-nil {
+    font-style: italic;
+  }
+
+  .measure {
+    border-bottom: 1px dotted @colour-text-form-value;
+    cursor: help;
   }
 }