.inspectorInfoWrapper {
    position: relative;
}

.inspectorInfoButton {
    position: absolute;
    display: block;
    top: 10px;
    right: 10px;
    border-radius: 50%;
    cursor: pointer;
    height: 24px;
    width: 24px;
}

.inspectorInfoButton:hover {
    box-shadow: 0 3px 4px -1px #8C7D70, 0 2px 8px #8C7D70;
}

.inspectorInfo {
    min-width: 300px;
}

.inspectorInfoWrapper:hover {
    box-shadow: 0 3px 4px -1px #8C7D70, 0 2px 8px #8C7D70;
}

.inspector{
    background-color: #8C7D70;
}
/*
 * The MIT License
 * Copyright (c) 2012 Matias Meno <m@tias.me>
 */
@keyframes passing-through {
  0% {
    opacity: 0;
    transform: translateY(40px); }
  30%, 70% {
    opacity: 1;
    transform: translateY(0px); }
  100% {
    opacity: 0;
    transform: translateY(-40px); } }
@keyframes slide-in {
  0% {
    opacity: 0;
    transform: translateY(40px); }
  30% {
    opacity: 1;
    transform: translateY(0px); } }
@keyframes pulse {
  0% {
    transform: scale(1); }
  10% {
    transform: scale(1.1); }
  20% {
    transform: scale(1); } }
.dropzone, .dropzone * {
  box-sizing: border-box; }

.dropzone {
  min-height: 150px;
  border: 2px solid rgba(0, 0, 0, 0.3);
  background: white;
  padding: 20px 20px; }
  .dropzone.dz-clickable {
    cursor: pointer; }
    .dropzone.dz-clickable * {
      cursor: default; }
    .dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * {
      cursor: pointer; }
  .dropzone.dz-started .dz-message {
    display: none; }
  .dropzone.dz-drag-hover {
    border-style: solid; }
    .dropzone.dz-drag-hover .dz-message {
      opacity: 0.5; }
  .dropzone .dz-message {
    text-align: center;
    margin: 2em 0; }
  .dropzone .dz-preview {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 16px;
    min-height: 100px; }
    .dropzone .dz-preview:hover {
      z-index: 1000; }
      .dropzone .dz-preview:hover .dz-details {
        opacity: 1; }
    .dropzone .dz-preview.dz-file-preview .dz-image {
      border-radius: 20px;
      background: #999;
      background: linear-gradient(to bottom, #eee, #ddd); }
    .dropzone .dz-preview.dz-file-preview .dz-details {
      opacity: 1; }
    .dropzone .dz-preview.dz-image-preview {
      background: white; }
      .dropzone .dz-preview.dz-image-preview .dz-details {
        transition: opacity 0.2s linear; }
    .dropzone .dz-preview .dz-remove {
      font-size: 14px;
      text-align: center;
      display: block;
      cursor: pointer;
      border: none; }
      .dropzone .dz-preview .dz-remove:hover {
        text-decoration: underline; }
    .dropzone .dz-preview:hover .dz-details {
      opacity: 1; }
    .dropzone .dz-preview .dz-details {
      z-index: 20;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      font-size: 13px;
      min-width: 100%;
      max-width: 100%;
      padding: 2em 1em;
      text-align: center;
      color: rgba(0, 0, 0, 0.9);
      line-height: 150%; }
      .dropzone .dz-preview .dz-details .dz-size {
        margin-bottom: 1em;
        font-size: 16px; }
      .dropzone .dz-preview .dz-details .dz-filename {
        white-space: nowrap; }
        .dropzone .dz-preview .dz-details .dz-filename:hover span {
          border: 1px solid rgba(200, 200, 200, 0.8);
          background-color: rgba(255, 255, 255, 0.8); }
        .dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
          overflow: hidden;
          text-overflow: ellipsis; }
          .dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
            border: 1px solid transparent; }
      .dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
        background-color: rgba(255, 255, 255, 0.4);
        padding: 0 0.4em;
        border-radius: 3px; }
    .dropzone .dz-preview:hover .dz-image img {
      transform: scale(1.05, 1.05);
      filter: blur(8px); }
    .dropzone .dz-preview .dz-image {
      border-radius: 20px;
      overflow: hidden;
      width: 120px;
      height: 120px;
      position: relative;
      display: block;
      z-index: 10; }
      .dropzone .dz-preview .dz-image img {
        display: block; }
    .dropzone .dz-preview.dz-success .dz-success-mark {
      animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); }
    .dropzone .dz-preview.dz-error .dz-error-mark {
      opacity: 1;
      animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); }
    .dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
      pointer-events: none;
      opacity: 0;
      z-index: 500;
      position: absolute;
      display: block;
      top: 50%;
      left: 50%;
      margin-left: -27px;
      margin-top: -27px; }
      .dropzone .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg {
        display: block;
        width: 54px;
        height: 54px; }
    .dropzone .dz-preview.dz-processing .dz-progress {
      opacity: 1;
      transition: all 0.2s linear; }
    .dropzone .dz-preview.dz-complete .dz-progress {
      opacity: 0;
      transition: opacity 0.4s ease-in; }
    .dropzone .dz-preview:not(.dz-processing) .dz-progress {
      animation: pulse 6s ease infinite; }
    .dropzone .dz-preview .dz-progress {
      opacity: 1;
      z-index: 1000;
      pointer-events: none;
      position: absolute;
      height: 16px;
      left: 50%;
      top: 50%;
      margin-top: -8px;
      width: 80px;
      margin-left: -40px;
      background: rgba(255, 255, 255, 0.9);
      -webkit-transform: scale(1);
      border-radius: 8px;
      overflow: hidden; }
      .dropzone .dz-preview .dz-progress .dz-upload {
        background: #333;
        background: linear-gradient(to bottom, #666, #444);
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 0;
        transition: width 300ms ease-in-out; }
    .dropzone .dz-preview.dz-error .dz-error-message {
      display: block; }
    .dropzone .dz-preview.dz-error:hover .dz-error-message {
      opacity: 1;
      pointer-events: auto; }
    .dropzone .dz-preview .dz-error-message {
      pointer-events: none;
      z-index: 1000;
      position: absolute;
      display: block;
      display: none;
      opacity: 0;
      transition: opacity 0.3s ease;
      border-radius: 8px;
      font-size: 13px;
      top: 130px;
      left: -10px;
      width: 140px;
      background: #be2626;
      background: linear-gradient(to bottom, #be2626, #a92222);
      padding: 0.5em 1.2em;
      color: white; }
      .dropzone .dz-preview .dz-error-message:after {
        content: '';
        position: absolute;
        top: -6px;
        left: 64px;
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #be2626; }
.reactEasyCrop_Container {
    touch-action: auto;
}

.removeTouchAction {
    touch-action: none;
}

.crop-container {
    position: relative;
    width: 100%;
    height: 400px;
}

.controls {
    width: 50%;
    height: 40px;
    margin: auto;
    display: flex;
    align-items: center;
}

.zoom-range {
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 2px;
    border-top: 5px solid #fff;
    border-bottom: 5px solid #fff;
    background: #3f51b5;
    width: 100%;
}

.zoom-range::-moz-range-thumb {
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px solid #3f51b5;
    background: #3f51b5;
    border-radius: 50%;
    width: 12px;
    height: 12px;
    -moz-transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

.zoom-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px solid #3f51b5;
    background: #3f51b5;
    border-radius: 50%;
    width: 12px;
    height: 12px;
    -webkit-transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    cursor: pointer;
}

.controls:hover input[type='range']::-webkit-slider-thumb {
    box-shadow: 0 0 0 8px rgba(63, 81, 181, 0.16);
    border-radius: 50%;
}

.controls:hover input[type='range']::-moz-range-thumb {
    box-shadow: 0 0 0 8px rgba(63, 81, 181, 0.16);
}

.zoom-hint,
.touch-hint {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    pointer-events: none;
    text-align: center;
}

/* -------------------------------------------- */
/* Codebox Transity */
/* Version: 15 */
/* -------------------------------------------- */
/* Created by @twotribes, Germany */
/* -------------------------------------------- */
/* StyleSheet Scope: INITIALIZATION FOR INTERNAL APPS */
/* -------------------------------------------- */

/* !-------------------------------------------- */
/* !Fonts */
/* !-------------------------------------------- */
/* Obtained from www.fontsquirrel.com */
/* The Aileron font family is a CC0 1.0 Universal (CC0 1.0) Public Domain Dedication, see https://www.fontsquirrel.com/license/aileron */
/* The JetBrains Mono font family is available under an Apache 2.0 license, see https://www.fontsquirrel.com/fonts/jetbrains-mono */
/* !-------------------------------------------- */

@font-face {
    font-family: "Aileron";
    src: url(../../static/media/Aileron-Light-webfont.fed2ae046239282e98b3.woff2) format("woff2");
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: "Aileron";
    src: url(../../static/media/Aileron-Regular-webfont.8ed432d016102330f54f.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Aileron";
    src: url(../../static/media/Aileron-SemiBold-webfont.9bdc9e50f31b9d5ec36d.woff2) format("woff2");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Aileron";
    src: url(../../static/media/Aileron-Bold-webfont.0162f4a414c3ce24b836.woff2) format("woff2");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Aileron";
    src: url(../../static/media/Aileron-Black-webfont.f34bf4a5dcfd6e1ba2d8.woff2) format("woff2");
    font-weight: 800;
    font-style: normal;
}

/* Massively reduced character set (restricted to 0123456789P) */
@font-face {
    font-family: "JetBrains Mono";
    src: url(../../static/media/jetbrainsmono-regular-webfont.02c803be85e833739a88.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "JetBrains Mono";
    src: url(../../static/media/jetbrainsmono-medium-webfont.e87af7a18647ad052b3d.woff2) format("woff2");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "JetBrains Mono";
    src: url(../../static/media/jetbrainsmono-bold-webfont.98c53f7352ba1d2e2824.woff2) format("woff2");
    font-weight: 600;
    font-style: normal;
}

/* !-------------------------------------------- */
/* !Reset-styles */
/* !-------------------------------------------- */

/* Sane box sizing */
*, *:before, *:after {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

/* Viewport scaling + global UX settings */
html {
    min-height: 100%;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion) {
    html {
        scroll-behavior: auto;
    }
}

/* Element initialization */
body, h1, h2, h3, h4, h5, h6, p {
    font-weight: inherit;
    margin: 0;
    padding: 0;
}

main {
    display: block; /* bugfix for IE11 and older (their default is display: inline) */
}

ul, ol, li, dl, dt, dd {
    list-style: none;
    margin: 0;
    padding: 0;
}

fieldset {
    margin: 0;
    padding: 0;
    border: none;
    min-width: 0; /* overrides browser default to make it as wide as its widest children */
}

legend {
    color: inherit;
    margin: 0;
    padding: 0;
}

dialog {
    margin: 0;
}

mark {
    background-color: transparent;
}

/* Abbreviations with explanations on :hover */
abbr {
    border: none; /* tame Chrome + Firefox */
    text-decoration: none; /* tame Chrome + Firefox */
}

@media (hover: hover) {
    abbr:hover {
        cursor: help;
    }
}

/* :focus initialization */
*:focus:not(:focus-visible) {
    outline: none;
}

/* !-------------------------------------------- */
/* !EDGE CASE */
/* !-------------------------------------------- */

/* TO DO: This is only used by the temporary component loading animation (LoadingComponent.tsx) */
.center-content {
    text-align: center;
}

/* -------------------------------------------- */
/* Codebox Transity */
/* Version: 67 */
/* -------------------------------------------- */
/* Created by @twotribes, Germany */
/* -------------------------------------------- */
/* StyleSheet Scope: STAGE SETUP */
/* -------------------------------------------- */

/* !-------------------------------------------- */
/* !STAGE: General layout */
/* !-------------------------------------------- */

/* --- General containers */
.stage {
    min-height: 100%;
    font: var(--textset-m);
    color: var(--textcolor-init);
}

.ensemble, 
.actor {
    position: relative;
}


/* --- Header actors (navigation + page header) */
/* Background stripes for navigation bar */
#ensemble_head {
    &:before {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: var(--main-navigation-height);
        background-color: var(--backcolor-active);
        background-image: var(--gradient-nav-main);
        z-index: -1;
    }
    
    /* Background stripes for header bar */
    &:after {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        top: var(--main-navigation-height);
        width: 100%;
        height: var(--main-header-height);
        background-color: var(--backcolor-standard);
        background-image: var(--gradient-nav-header);
        z-index: -1;
    }
    
    /* Actor containers */
    #actor_navigation, 
    #actor_header {
        width: var(--site-width);
        margin: 0 auto 0 auto;
    }
    
    #actor_navigation {
        height: var(--main-navigation-height);
    }
    
    #actor_header {
        height: var(--main-header-height);
        margin-bottom: var(--main-ensemble-gutter);
    }
}


/* --- Wrapper for main actors */
.stage #ensemble_main {
    z-index: 1; /* makes sure its flyouts are always below parallel open flyouts from #ensemble_head (extreme edge case) */
}

/* ObjectView main ensemble initializes itself to full remaining height */
/* Login exceeds this min-height anyway since the inner #actor_authorization initializes itself taller */
.stage:not(.stage-objectview) #ensemble_main {
    min-height: calc(100dvh - 205px);
}


/* !-------------------------------------------- */
/* !STAGE: Login */
/* !-------------------------------------------- */

.stage-login {
    #ensemble_head #actor_header {
        margin-bottom: 0;
    }
    
    /* Force background image to fill the entire height of viewport */
    #actor_authorization {
        min-height: calc(100dvh - var(--main-navigation-height) - var(--main-header-height));
    }
}


/* !-------------------------------------------- */
/* !STAGE: Generic error page */
/* !-------------------------------------------- */

.stage #actor_error {
    width: var(--site-width);
    margin: 0 auto 0 auto;
}


/* !-------------------------------------------- */
/* !STAGE: Dashboard */
/* !-------------------------------------------- */

.stage-dashboard #actor_dashboard {
    width: var(--site-width);
    margin: 0 auto 0 auto;
}


/* !-------------------------------------------- */
/* !STAGE: ListView */
/* !-------------------------------------------- */

.stage-listview #actor_list {
    width: var(--site-width);
    margin: 0 auto 0 auto;
}


/* !-------------------------------------------- */
/* !STAGE: ObjectView */
/* !-------------------------------------------- */

/* --- Stage + Ensemble frame */
.stage-objectview {
    overflow: hidden;
    height: 100vh;
    
    --listcontrol-height-correction: 53px;
    --incident-gutter-correction: 20px;
    --controller-gutter-correction: 3px;

    #ensemble_main {
        width: var(--site-width);
        margin: 0 auto 0 auto;
        height: calc(100vh - var(--main-navigation-height) - var(--main-header-height) - var(--main-ensemble-gutter));
    }
    
    #ensemble_main .actor {
        position: absolute;
    }
}


/* --- Controllers */
.stage-objectview {
    /* Sidebar list controller */
    #actor_listcontrol {
        top: var(--controller-gutter-correction);
        left: 0;
        width: var(--sidebar-width);
        height: calc(var(--objectcontrol-height) + var(--listcontrol-height-correction) - var(--controller-gutter-correction));
    }
    
    /* Main entity controller */
    #actor_objectcontrol {
        top: var(--controller-gutter-correction);
        right: 0;
        width: calc(var(--site-width) - var(--sidebar-width) - var(--sidebar-gutter));
        height: var(--objectcontrol-height);
    }
    
    #actor_objectcontrol.expression-menu {
        z-index: 30;
    }
    
    /* Edge case: no controllers for current object */
    #actor_objectcontrol:empty {
        height: 1px;
    }
}


/* --- List + Object with individual scrollbars */
.stage-objectview {
    #actor_list {
        top: calc(var(--objectcontrol-height) + var(--listcontrol-height-correction));
        left: 0;
        width: var(--sidebar-width);
        height: calc(100% - var(--objectcontrol-height) - var(--listcontrol-height-correction));
        overflow: auto;
    }
    
    #actor_incident {
        top: calc(var(--objectcontrol-height) + var(--incident-gutter-correction));
        right: 0;
        width: calc(var(--site-width) - var(--sidebar-width) - var(--sidebar-gutter));
        height: calc(100% - var(--objectcontrol-height) - var(--incident-gutter-correction));
        overflow: auto;
    }
    
    /* Edge case: no controllers for current object */
    #actor_objectcontrol:empty ~ #actor_incident {
        top: 8px;
        height: calc(100% - 8px);
    }
}


/* --- Collapsed list */
.stage-objectview { 
    #actor_listcontrol.expression-collapsed, 
    #actor_list.expression-collapsed {
        width: var(--sidebar-collapsed-width);
    }
    
    #actor_listcontrol.expression-collapsed + #actor_objectcontrol, 
    #actor_list.expression-collapsed + #actor_incident {
        width: calc(var(--site-width) - var(--sidebar-collapsed-width) - var(--sidebar-gutter));
    }
}


/* --- ObjectViews without sidebar (missing ListView context) */
.stage-objectview:not(:has(#actor_list)) {
    #actor_listcontrol {
        width: var(--sidebar-missing-width);
    }
    
    #actor_listcontrol + #actor_objectcontrol, 
    #actor_incident {
        width: calc(var(--site-width) - var(--sidebar-missing-width) - var(--sidebar-gutter));
    }
}


/* !-------------------------------------------- */
/* !STAGE: Global page error */
/* !-------------------------------------------- */

.stage:not(:has(.ensemble)) {
    /* --- Singular message container */
    .substance-message {
        text-align: center;
        padding: 16px 20vw 32px 20vw;
    }
    
    /* --- Error message */
    .substance-message .substance-richtext {
        font: var(--textset-l);
    }
        
    .substance-message .substance-richtext h4 {
        padding-top: 96px;
        padding-left: 0;
        background-position: center 0;
        background-size: 64px;
        font: var(--textset-xxl);
    }
    
    /* --- Reset button */
    .primary-action {
        display: block;
        margin: 32px auto 32px auto;
    }
}


/* !-------------------------------------------- */
/* !STAGE MODE: Active overlays */
/* !-------------------------------------------- */

/* --- Initialize blocking layer */
#ensemble_overlay {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: var(--backcolor-overlay-blocker);
}

.stage .ensemble:not(#ensemble_overlay) {
    filter: none; /* use "none" to avoid creating new stacking contexts */
}

/* --- Active overlay layer */
.stage.overlay-active {
    overflow: hidden;
    height: 100%;
}

.stage.overlay-active .ensemble:not(#ensemble_overlay) {
    filter: blur(10px);
}

.stage.overlay-active #ensemble_overlay {
    display: block;
}


/* --- Contained actor with overlay content */
#ensemble_overlay {
    .actor {
        position: absolute;
        top: var(--overlay-viewport-distance);
        left: 50%;
        width: 50%;
        transform: translateX(-50%);
        max-height: calc(100dvh - (2 * var(--overlay-viewport-distance)));
        overflow: hidden;
        border: var(--line-overlay);
        border-radius: var(--radius-panel);
        box-shadow: var(--shadow-overlay);
        min-width: var(--overlay-width-minimum);
        max-width: var(--overlay-width-maximum);
    }
    
    /* Overlay: Creator dialog (fixed height) */
    #actor_creator {
        bottom: var(--overlay-viewport-distance);
        width: 60%;
    }
    
    @media only screen and (max-width: 736px) {
        #actor_creator {
            left: 0;
            transform: none;
            min-width: 0;
            max-width: none;
            width: 100%;
        }
    }
    
    /* Overlay: Image viewer (fixed height) */
    #actor_viewer {
        bottom: var(--overlay-viewport-distance);
        width: 70%;
    }
    
    /* Overlay: Creator dialog (dynamic height) */
    #actor_pay {
    }
}

/* -------------------------------------------- */
/* Codebox Transity */
/* Version: 266 */
/* -------------------------------------------- */
/* Created by @twotribes, Germany */
/* -------------------------------------------- */
/* StyleSheet Scope: SMALL ACTOR-INDEPENDENT RESOURCES */
/* -------------------------------------------- */

/* !-------------------------------------------- */
/* !COMPONENT: Emphasized text */
/* !-------------------------------------------- */

.tt-eins em {
    font-style: normal;
    font-weight: 700;
}

.tt-eins strong {
    font-weight: 800;
}


/* !-------------------------------------------- */
/* !COMPONENT: Abstract Links & Buttons */
/* !-------------------------------------------- */

/* --- Initalize abstract buttons */
.tt-eins button {
    border: none;
    border-radius: 0;
    display: inline-block;
    margin: 0;
    padding: 0;
    background: none;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    font-weight: 400;
    text-align: inherit;
    cursor: pointer;
    overflow: hidden;
    -webkit-appearance: none;
}

.tt-eins button:not([class]):active {
    color: inherit;
}


/* --- Initalize abstract links */
.tt-eins a {
    display: inline-block;
    font-family: inherit;
    font-size: inherit;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}


/* --- Speed up tap interaction on touchscreens (by preventing gesture interpretation) */
@media (pointer: coarse) {
    .tt-eins button,
    .tt-eins a {
        touch-action: manipulation;
    }
}


/* !-------------------------------------------- */
/* !COMPONENT: Menu entries & tabs */
/* !-------------------------------------------- */

.tt-eins .menu-action {
    font: var(--textset-m);
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Interaction states */
@media (hover: hover) {
}

.tt-eins .menu-action:focus-visible, 
.tt-eins .menu-action.view-action:focus-visible {
    outline: var(--focus-outline-inverse);
    outline-offset: -5px;
}


/* !-------------------------------------------- */
/* !COMPONENT: Abstract links/button (used in menu flyouts + for crossjumps) */
/* !-------------------------------------------- */

.tt-eins .link-action {
    color: var(--linkcolor);
    transition: var(--transition-color);
}

.tt-eins .link-action:has(> .substance-entity) {
}

.tt-eins .link-action:has(> .substance-entity.entity-state) {
}

.tt-eins .link-action:has(> .substance-id) {
}

/* Interaction states */
@media (hover: hover) {
    .tt-eins .link-action:hover {
        color: var(--linkcolor-hover);
        transition: var(--transition-color);
    }
}

.tt-eins .link-action:focus-visible {
    outline: var(--focus-outline-standard);
    outline-offset: 3px;
}


/* !-------------------------------------------- */
/* !COMPONENT: Email links */
/* !-------------------------------------------- */

.tt-eins .email-action {
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    position: relative;
    padding-left: 26px;
    color: var(--actioncolor-text);
    font-size: inherit;
    font-weight: 500;
    line-height: inherit;
    min-height: 17px;
    word-break: break-all;
    -ms-word-break: break-all;
    transition: var(--transition-color);
    
    /* Truncated domain */
    &.action-truncated {
        word-break: normal;
        -ms-word-break: normal;
        white-space: nowrap;
    }

    /* Icon */
    &:before {
        content: "";
        display: block;
        position: absolute;
        top: -2px;
        left: 0;
        height: var( --button-iconsize);
        width: var( --button-iconsize);
        background: transparent url(../../static/media/icon_action_email.22fe0e7d5e590ae48ef8.svg) center no-repeat;
    }
}

/* Interaction states */
@media (hover: hover) {
    .tt-eins .email-action:not([aria-disabled="true"]):hover {
        color: var(--actioncolor-text-hover);
        transition: var(--transition-color);
    }
}

.tt-eins .email-action:focus-visible {
    outline: var(--focus-outline-standard);
    outline-offset: 3px;
}

/* Hardcore disabled state */
.tt-eins .email-action[aria-disabled="true"] {
    color: inherit;
    cursor: default;
    
    &[aria-disabled="true"]:before {
        background-image: url(../../static/media/icon_action_email_idle.837dd03d7499f34ec986.svg);
    }
}


/* !-------------------------------------------- */
/* !COMPONENT: Flyout controllers */
/* !-------------------------------------------- */

/* --- Small standard form */
.tt-eins .view-action {
    position: relative;
    font: var(--textset-m);
    color: var(--actioncolor-text);
    padding: 0 16px 0 0;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: var(--transition-color);
    
    /* Negative display */
    &.action-inverse {
        color: #fff;
    }
}

/* Disabled state */
/* Sub-structured flyout controllers for .substance-filter handle this differently */
.tt-eins .view-action[disabled]:not(:has(> span)) {
    opacity: 0.5;
}

/* Interaction states */
@media (hover: hover) {
    .tt-eins .view-action:not([disabled]):hover {
        color: var(--actioncolor-text-hover);
        transition: var(--transition-color);
    }
    
    .tt-eins .view-action.action-inverse:not([disabled]):hover {
        color: #fff;
    }

    .tt-eins .view-action[disabled]:hover {
        color: var(--actioncolor-text);
        cursor: not-allowed;
    }
}

.tt-eins .view-action:focus-visible {
    outline: var(--focus-outline-standard);
    outline-offset: 3px;
}

/* Dropdown arrow */
.tt-eins .view-action:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -7px;
    height: 14px;
    width: 14px;
    background: transparent url(../../static/media/TEMP_icon_action_menu.a88f3445b1b65e2c6399.svg) center no-repeat;
    transition: var(--transition-transform);
}

.tt-eins .view-action.action-inverse:after {
    background-image: url(../../static/media/TEMP_icon_action_menu_white.e66f78d75f9de755e0a3.svg);
}

.tt-eins .view-action.flyout-active:after, 
.tt-eins .view-action.item-active:after {
    transform: rotateX(180deg);
    transition: var(--transition-transform);
}


/* --- Large controller buttons */
.tt-eins .view-action.menu-big {
    padding: 0 32px 0 20px;
    height: var(--button-height);
    line-height: var(--button-height);
    border: 1px solid var(--actioncolor);
    background: #fff;
    border-radius: var(--radius-interaction);
    font-weight: 500;
    transition: var(--transition-universal);
    
    &.menu-solid {
        background-image: var(--gradient-button-solid);
        font: var(--textset-plus-s);
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #fff;
    }
}

/* Interaction states */
@media (hover: hover) {
    .tt-eins .view-action.menu-big:not([disabled]):hover {
        border-color: #000;
    }
    
    .tt-eins .view-action.menu-big.menu-solid[disabled]:hover {
        color: #fff;
    }
    
    .tt-eins .view-action.menu-big.menu-solid:not([disabled]):hover {
        background-image: var(--gradient-button-solid-hover);
        color: #fff;
    }
}

.tt-eins .view-action.menu-big:focus-visible {
}

/* Dropdown arrow */
.tt-eins .view-action.menu-big:after {
    right: 17px;
    margin-top: -6px;
}

.tt-eins .view-action.menu-big.menu-solid:after {
    background-image: url(../../static/media/TEMP_icon_action_menu_white.e66f78d75f9de755e0a3.svg);
    margin-top: -7px;
}


/* --- Single, unlabeled flyout button for ListViews */
.tt-eins .view-action.action-icon {
    overflow: hidden;
    text-indent: -1000em;
    text-align: left;
    width: 32px;
    height: 22px;
    padding-right: 0;
    border: 1px solid var(--actioncolor);
    background-color: var(--button-back-simple);
    border-radius: var(--radius-interaction);
    transition: var(--transition-universal);
}

/* Interaction states */
@media (hover: hover) {
    .tt-eins .view-action.action-icon:hover {
        border-color: var(--actioncolor-hover);
        background-color: #fff;
        transition: var(--transition-universal);
    }
}

.tt-eins .view-action.action-icon:focus-visible {
}

/* Dropdown arrow */
.tt-eins .view-action.action-icon:after {
    top: 50%;
    right: auto;
    left: 50%;
    margin: -7px 0 0 -7px;
}


/* !-------------------------------------------- */
/* !COMPONENT: Section expanders */
/* !-------------------------------------------- */

/* --- Standard block expanders */
.tt-eins .expand-action {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    font: var(--textset-m);
    color: var(--expandcolor);
    padding: 0 0 0 20px;
    transition: var(--transition-color);
    
    /* Arrow icon */
    &:before {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        left: 0;
        margin-top: -7px;
        height: 14px;
        width: 14px;
        background: transparent url(../../static/media/TEMP_icon_action_expand.e33d107c438183819c70.svg) center no-repeat;
        transform: rotateZ(90deg);
        transition: var(--transition-transform);
    }
}

/* Expanded state */
/* Dirty condition, so we need to restrict it (should be refactored once TB-1299 has been done) */
.tt-eins .item-active .expand-action:before {
    transform: rotateZ(180deg);
    transition: var(--transition-transform);
}

.tt-eins .menu-section.section-expandable .expand-action:not(.item-active):before {
    transform: rotateZ(90deg);
}

.tt-eins .menu-section.section-expandable.item-active .expand-action.item-active:before {
    transform: rotateZ(180deg);
}

/* Interaction states */
@media (hover: hover) {
    .tt-eins :is(.expand-action, .section-title.expand-action):hover {
        color: var(--expandcolor-hover);
        transition: var(--transition-color);
    }
}

.tt-eins .expand-action:focus-visible {
    outline: var(--focus-outline-accent);
    outline-offset: 3px;
}


/* !-------------------------------------------- */
/* !COMPONENT: Primary action hierarchy */
/* !-------------------------------------------- */

/* --- Primary actions (large default) */
.tt-eins .primary-action {
    position: relative;
    display: inline-block;
    border: 1px solid var(--actioncolor);
    border-radius: var(--radius-interaction);
    background-image: var(--gradient-button);
    font: var(--textset-plus-s);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--actioncolor-text);
    text-decoration: none;
    height: var(--button-height);
    line-height: var(--button-height);
    text-align: center;
    padding: 0 20px 0 20px;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: var(--transition-universal);
    
    /* Solid buttons */
    &.action-level-solid {
        background-image: var(--gradient-button-solid);
        color: #fff;
    }
}

/* Interaction states */
@media (hover: hover) {
    .tt-eins .primary-action:not([disabled]):hover {
        background-image: var(--gradient-button-hover);
        border-color: var(--actioncolor-hover);
        color: var(--actioncolor-text-hover);
        transition: var(--transition-universal);
    }
    
    .tt-eins .primary-action.action-level-solid:not([disabled]):hover {
        background-image: var(--gradient-button-solid-hover);
        border-color: var(--actioncolor-hover);
    }
    
    .tt-eins .primary-action.action-level-solid:not(.action-size-mini):not([disabled]):hover {
        color: #fff;
    }
}

.tt-eins .primary-action:focus-visible {
    outline: var(--focus-outline-standard);
    outline-offset: 3px;        
}


/* --- Small buttons with action icons */
.tt-eins .primary-action.action-size-mini {
    padding: 6px 6px 4px 26px;
    border: 1px solid var(--actioncolor-shade-light);
    background-color: var(--button-back-simple);
    background-image: none;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
    font: var(--textset-m);
    font-weight: 500;
    height: var(--button-height-mini);
    
    /* Solid buttons */
    &.action-level-solid {
        background-image: var(--gradient-button-solid);
        color: #fff;
    }

    /* Icon-only variant */
    &.action-icon {
        padding-left: 0;
        width: var(--button-height-mini);
        height: var(--button-height-mini);
        text-indent: -1000em;
    }
}

/* Interaction states */
@media (hover: hover) {
    .tt-eins .primary-action.action-size-mini:not([disabled]):hover {
        color: var(--actioncolor-text-hover);
        border-color: var(--actioncolor-hover);
        background-color: #fff;
        background-image: none;
    }
    
    .tt-eins .primary-action.action-size-mini.action-level-solid:not([disabled]):hover {
        background-image: var(--gradient-button-solid-hover);
        border-color: #000;
        color: #fff;
    }
}

.tt-eins .primary-action.action-level-solid:focus-visible {
}

/* Disabled state */
.tt-eins .primary-action[disabled] {
    opacity: 0.5;
}

@media (hover: hover) {
    .tt-eins .primary-action[disabled]:hover {
        cursor: not-allowed;
    }
}

/* Icon placement */
.tt-eins .primary-action.action-size-mini:before {
    content: "";
    position: absolute;
    display: block;
    height: var( --button-iconsize);
    width: var( --button-iconsize);
    top: 50%;
    left: 2px;
    transform: translateY(-50%);
    background: transparent center no-repeat;
    transition: var(--transition-universal);
}

.tt-eins .primary-action.action-icon:before {
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}


/* --- Icons */
.tt-eins .primary-action {
    &.action-add:before {
        background-image: url(../../static/media/icon_action_add.9b3dc3d9974757487240.svg);
    }
    
    &.action-create:before {
        background-image: url(../../static/media/icon_action_create.f980def587d7cd28c673.svg);
    }
    
    &.action-copy:before {
        background-image: url(../../static/media/icon_action_copy.6ba1e3caa197555d8ca6.svg);
    }
    
    &.action-download:before {
        background-image: url(../../static/media/icon_action_download.2d5d256f5b500cbc2973.svg);
    }
    
    &.action-upload:before {
        background-image: url(../../static/media/icon_action_upload.1a527ac0ed40232efb88.svg);
    }
    
    &.action-delete:before {
        background-image: url(../../static/media/icon_action_delete.6c701eae560ae4eaca76.svg);
    }
    
    &.action-save:before {
        background-image: url(../../static/media/icon_action_save.9373f384d8f6420b3bbd.svg);
    }
    &.action-save.action-level-solid:before {
        background-image: url(../../static/media/icon_action_save_white.6a5411904ecbbae45ca3.svg);
    }
    
    &.action-mail:before {
        background-image: url(../../static/media/icon_action_email.22fe0e7d5e590ae48ef8.svg);
    }
    
    &.action-cancel:before {
        background-image: url(../../static/media/icon_action_cancel.fe7f258a6accc4e31fcf.svg);
    }
    &.action-cancel.action-level-solid:before {
        background-image: url(../../static/media/icon_action_cancel_white.79b0f52768f21c1be3b3.svg);
    }
    
    &.action-calendar:before {
        background-image: url(../../static/media/icon_action_calendar.95297c7fa2ba15e35105.svg);
    }
    
    &.action-time:before {
        background-image: url(../../static/media/icon_action_time.85d7f83b4d32381432ab.svg);
    }
    
    &.action-switch:before {
        background-image: url(../../static/media/icon_action_switch.aaf097f8cb1b38724cd5.svg);
    }
    
    &.action-transfer:before {
        background-image: url(../../static/media/icon_action_transfer.051b147b7f97349e9aca.svg);
    }

    &.action-verify:before, 
    &.action-undo:before, 
    &.action-reload:before {
        background-image: url(../../static/media/icon_action_reload.bae7a4c78c2308b1efcd.svg);
    }
    
    &.action-edit:before {
        background-image: url(../../static/media/icon_action_edit.0ec95054b657c42de6b7.svg);
    }
    
    &.action-view:before {
        background-image: url(../../static/media/icon_action_view_on.c6d253a9254c6f0d3ba0.svg);
    }
    
    &.action-view.item-active:before {
        background-image: url(../../static/media/icon_action_view_off.fa131c88e744c6cbd69e.svg);
    }
    
    &.action-search:before {
        background-image: url(../../static/media/icon_action_search.928c23d789d78cd03a24.svg);
    }
    
    &.action-print:before {
        background-image: url(../../static/media/icon_action_print.968e75ae43ceaace9dfb.svg);
    }
    
    &.action-finish:before {
        background-image: url(../../static/media/icon_action_finish.bd9609ee850ca5fcb9cb.svg);
    }
    
    &.action-reorder-up:before {
        background-image: url(../../static/media/icon_action_reorder_up.8c4dc5f8a727af9399c0.svg);
    }
    
    &.action-reorder-down:before {
        background-image: url(../../static/media/icon_action_reorder_down.ee9f468ddd2bd1754c4d.svg);
    }
    
    &.action-decide-approve:before, 
    &.action-decide-reject:before {
        background-image: url(../../static/media/icon_action_decide_approve.7bf04f1f2d94e908ab59.svg);
    }
    
    &.action-decide-reject:before {
        transform: rotateX(180deg) translateY(50%);
    }
    
    &.action-up:before, 
    &.action-down:before, 
    &.action-back:before, 
    &.action-forward:before {
        background-image: url(../../static/media/icon_action_up.a3d1c6b12756dce70b24.svg);
    }
    
    &.action-down:before {
        transform: rotateZ(-180deg) translateY(50%);
    }
    
    &.action-back:before {
        transform: translateX(-10%) translateY(-50%) rotateZ(-90deg);
    }
    
    &.action-icon.action-back:before {
        transform: translateX(-50%) translateY(-50%) rotateZ(-90deg);
    }
    
    &.action-icon.action-forward:before {
        transform: translateX(-50%) translateY(-50%) rotateZ(90deg);
    }
}


/* !-------------------------------------------- */
/* !COMPONENT: Table sorters */
/* !-------------------------------------------- */

.tt-eins .sort-action {
    display: block;
    position: relative;
    padding: var(--column-title-padding);
    background: transparent;
    color: #000;
    font: var(--textset-plus-s);
    white-space: nowrap;
    width: 100%;
    transition: var(--transition-color);
}

/* TODO: remove support for legacy .sort-action.action-dir-* classes */
.tt-eins .sort-action:is(.action-dir-asc, .action-dir-desc), 
.tt-eins th[aria-sort] .sort-action, 
.tt-eins th[aria-sort] p {
    background-color: var(--backcolor-medium);
}

.tt-eins th[aria-sort] p {
    font-weight: 700;;
}

/* Interaction states */
@media (hover: hover) {
    .tt-eins .sort-action:hover {
        background-color: var(--backcolor-standard);
        transition: var(--transition-color);
    }
}

.tt-eins .sort-action:focus-visible {
    outline: var(--focus-outline-standard);
    outline-offset: -5px;
}


/* !-------------------------------------------- */
/* !COMPONENT: Form components */
/* !-------------------------------------------- */

/* --- Form containers (mainly used in Creators and ObjectView blocks) */
/* Subgroup headlines */
.tt-eins .substance-fieldlist legend {
    color: var(--textcolor-accent);
    margin: 0 0 10px 0;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    float: inline-start;
}

.tt-eins .substance-fieldlist legend + * {
    clear: inline-start;
}

/* Field container */
.tt-eins .field-entry {
    position: relative;
    
    --field-disabled-icon: transparent center url(../../static/media/icon_field_disabled.3934464ec8ccb6b2e5f3.svg) no-repeat;
}

.tt-eins .field-container {
    position: relative;
    vertical-align: top;
    padding-top: var(--field-height-label); /* Make space for label */
}

.tt-eins .field-entry.entry-checkbox .field-container, 
.tt-eins .field-entry.entry-radio .field-container, 
.tt-eins .field-entry.entry-unlabeled .field-container {
    padding-top: 0;
}

/* Multiple field groups */
.tt-eins .field-entry .field-container + .field-container {
    margin-top: 10px;
}

.tt-eins .field-entry:has(.field-container label > .substance-entity) .field-container + .field-container {
    margin-top: 14px;
}

/* --- Labels */
.tt-eins .field-entry label, 
.tt-eins .field-entry .field-title {
    color: var(--field-labelcolor);
    font: var(--textset-m);
    font-weight: 500;
}

.tt-eins .field-entry .field-title {
    margin-bottom: 12px;
}

/* Label positioning */
.tt-eins .field-entry:not(.entry-checkbox):not(.entry-radio):not(.entry-unlabeled) label {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Invisible labels (screenreader only) */
.tt-eins .field-entry.entry-unlabeled:not(.entry-checkbox):not(.editor-form) label {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
    margin: -1px;
}

/* Mobile viewports */
@container layout-container (width < 680px) {
    .tt-eins .field-entry label, 
    .tt-eins .field-entry .field-title {
        font: var(--textset-plus-m);
        font-weight: 500;
    }
}

/* Marking optional fields */
.tt-eins input:not([required]):not([type="checkbox"]):not([type="radio"]) ~ label:after, 
.tt-eins textarea:not([required]) ~ label:after, 
.tt-eins select:not([required]) ~ label:after, 
.tt-eins .field-entry .field-title:not(.title-required):after {
    content: " (optional)";
    font-weight: 400;
}

/* Labels for disabled fields */
.tt-eins .field-entry input[disabled] ~ label, 
.tt-eins .field-entry select[disabled] ~ label, 
.tt-eins .field-entry textarea[disabled] ~ label {
    cursor: not-allowed;
}


/* --- Text input fields */
.tt-eins input[type="text"], 
.tt-eins input[type="number"], 
.tt-eins input[type="email"], 
.tt-eins input[type="date"], 
.tt-eins input[type="time"], 
.tt-eins input[type="password"] {
    margin: 0;
    width: 100%;
    font: var(--textset-m);
    outline: none;
    box-shadow: none; /* suppress Firefox default styles for required fields */
    color: var(--field-textcolor);
    background-color: var(--field-backcolor);
    border-radius: var(--field-radius);
    border: 1px solid var(--field-bordercolor);
    padding: var(--field-padding);
    height: var(--field-height);
    -webkit-appearance: none; /* Prevents iOS Safari from putting an inner drop shadow inside the field */
    transition: var(--transition-universal);
}

/* Numeric fields */
.tt-eins input[type="number"]::-webkit-inner-spin-button, 
.tt-eins input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.tt-eins input[type="number"] {
    width: 9ch; /* for values up to 7 digits with widest glyphs */
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
            appearance: textfield;
}

/* Mobile viewports */
@container layout-container (width < 680px) {
    .tt-eins input[type="text"], 
    .tt-eins input[type="number"], 
    .tt-eins input[type="email"], 
    .tt-eins input[type="date"], 
    .tt-eins input[type="time"], 
    .tt-eins input[type="password"] {
        font: var(--textset-l);
    }
}

/* Interaction states */
@media (hover: hover) {
    .tt-eins input[type="text"]:hover, 
    .tt-eins input[type="number"]:hover, 
    .tt-eins input[type="email"]:hover, 
    .tt-eins input[type="date"]:hover, 
    .tt-eins input[type="time"]:hover, 
    .tt-eins input[type="password"]:hover {
        background: var(--field-backcolor-hover);
        border-color: var(--field-bordercolor-hover);
        transition: var(--transition-universal);
    }
}

.tt-eins input[type="text"]:focus, 
.tt-eins input[type="number"]:focus, 
.tt-eins input[type="email"]:focus, 
.tt-eins input[type="date"]:focus, 
.tt-eins input[type="time"]:focus, 
.tt-eins input[type="password"]:focus {
    color: var(--field-textcolor-focus);
    border-bottom-color: var(--field-bordercolor-focus);
    background: var(--field-backcolor-focus);
    transition: var(--transition-universal);
}

/* Fields with embedded action buttons */
.tt-eins .field-container.field-action {
    input, 
    textarea {
        padding-right: var(--field-width-action); /* leave room for overlay field action button */
    }
    
    > .primary-action, 
    > .substance-protector {
        position: absolute;
        bottom: 0;
        right: 0;
    }
    
    > .primary-action.action-size-mini, 
    > .substance-protector:not(.item-active) .primary-action.action-size-mini {
        border-radius: 0 var(--field-radius) var(--field-radius) 0;
        padding-top: 0;
        padding-bottom: 0;
        height: calc(var(--field-height));
    }
    
    > .primary-action.action-size-mini[tabindex="-1"] {
        background: transparent;
        border-color: transparent;
    }
}

.tt-eins .field-entry.entry-assistance .field-container.field-action input {
    padding-right: 100px; /* TO DO: distance is a hack, leave room for text-labelled assistance button */
}


/* Custom buttons for date/time fields: hide native helper buttons */
.tt-eins input[type="date"]::-webkit-inner-spin-button, 
.tt-eins input[type="date"]::-webkit-calendar-picker-indicator, 
.tt-eins input[type="time"]::-webkit-inner-spin-button, 
.tt-eins input[type="time"]::-webkit-calendar-picker-indicator {
    opacity: 0;
}

/* iOS 15+ : enforce alignment of date/time fields */
.tt-eins input::-webkit-date-and-time-value {
    text-align: left;
}

/* Precise treatment of date/time helper buttons */
/* Only Safari is clean. Chrome makes its own native icon transparent but needs to receive clicks to open its native dialogs */
/* The Firefox native icon can't be hidden. So we have to obscure it with our own buttons */
.tt-eins .field-container.field-action input[type="date"], 
.tt-eins .field-container.field-action input[type="time"] {
    padding-right: 7px;
}

.tt-eins .field-container.field-action input[type="date"] ~ .primary-action, 
.tt-eins .field-container.field-action input[type="time"] ~ .primary-action {
    pointer-events: none; /* click-transparent to allow native date/time pickers appearing on :focus */
    right: 4px;
}

/* Insane Firefox hack (bc it doesn't let us make its native icon invisible) */
@-moz-document url-prefix() {
    .tt-eins .field-container.field-action input[type="date"] {
        color: transparent;
        text-shadow: 0 0 0 var(--field-textcolor);
    }

    .tt-eins .field-container.field-action input[type="date"][disabled], 
    .tt-eins .field-container.field-action input[type="time"][disabled] {
        color: transparent;
        text-shadow: 0 0 0 var(--field-textcolor);
    }
    
    .tt-eins .field-container.field-action input[type="date"]:focus {
        color: transparent;
        text-shadow: 0 0 0 var(--field-textcolor-focus);
    }
}

/* Disabled fields */
.tt-eins input[type="text"][disabled], 
.tt-eins input[type="number"][disabled], 
.tt-eins input[type="email"][disabled], 
.tt-eins input[type="date"][disabled], 
.tt-eins input[type="time"][disabled], 
.tt-eins input[type="password"][disabled] {
    background: var(--field-backcolor-disabled);
    padding-left: var(--field-width-disabled);
    cursor: not-allowed;
    border-color: transparent !important;
    border-bottom-color: var(--field-bordercolor-disabled) !important;
    border-radius: 0;
    color: var(--field-textcolor);
    -webkit-text-fill-color: var(--field-textcolor); /* override Safari's weird default */
    opacity: 1; /* override Safari's weird default */
}

.tt-eins .field-entry:not(.entry-checkbox):not(.entry-radio) .field-container:has(input[disabled]):before {
    content: "";
    display: block;
    background: var(--field-disabled-icon);
    width: 10px;
    height: 10px;
    margin-bottom: -4px;
    position: absolute;
    left: 0;
    bottom: calc(var(--field-height) / 2);
}

.tt-eins .field-container.field-action input[disabled]:is([type="date"], [type="time"]) ~ .primary-action {
    display: none;
}

/* Validation markers */
.tt-eins .field-entry.has-validation {
    input:not([type="radio"]):not([type="checkbox"]) {
        border-bottom-width: 2px;
    }
    
    &.validation-ok input:not([type="radio"]):not([type="checkbox"]) {
        border-bottom-color: var(--color-state-ok);
    }
    
    &.validation-warn input:not([type="radio"]):not([type="checkbox"]) {
        border-bottom-color: var(--color-state-warn);
    }
    
    &.validation-crisis input:not([type="radio"]):not([type="checkbox"]) {
        border-bottom-color: var(--color-state-crisis);
    }
}


/* --- Text areas */
.tt-eins textarea {
    display: block;
    font: var(--textset-m);
    line-height: var(--textarea-normal-line-height);
    line-height: var(--textarea-initial-line-height);
    outline: none;
    box-shadow: none; /* suppress Firefox default styles for required fields */
    color: var(--field-textcolor);
    border-radius: var(--field-radius);
    margin: 0;
    padding: var(--field-padding);
    background-color: var(--field-backcolor);
    border: 1px solid var(--field-bordercolor);
    width: 100%;
    height: var(--textarea-auto-height);
    height: var(--textarea-initial-height);
    resize: none;
    overflow: auto; /* removes permanent scrollbars in IE */
    transition: var(--transition-universal);
    
    --textarea-initial-line-height: 20px; /* high enough to let 2nd line vanish in unfocused state */
    --textarea-expanded-line-height: initial;
    
    --textarea-initial-height: var(--field-height);
    --textarea-expanded-height: 100px; /* leaves space for 5 lines of text */
}

@container layout-container (width < 680px) {
    .tt-eins textarea {
        font: var(--textset-l);
    }
}

/* Dynamic height control */
/* Custom config for older browsers + textarea instances inside the internal apps (incl. Creators) */
@supports not (field-sizing: content) {
    .tt-eins:not(.transity-embed) textarea {
        --textarea-initial-line-height: initial;
        --textarea-initial-height: var(--textarea-expanded-height);
    }
}

/* Native solution only for Chrome/Chromium (as of December 2024) */
@supports (field-sizing: content) {
    .tt-eins textarea {
        min-height: calc(2 * var(--field-height));
        field-sizing: content;
        
        --textarea-initial-line-height: initial;
        --textarea-expanded-line-height: initial;
        
        --textarea-initial-height: auto;
        --textarea-expanded-height: auto;
    }
}

/* Interaction states */
@media (hover: hover) {
    .tt-eins textarea:hover {
        background: var(--field-backcolor-hover);
        border-color: var(--field-bordercolor-hover);
        transition: var(--transition-universal);
    }
}

.tt-eins .field-entry.entry-emphasis textarea, 
.tt-eins textarea:focus {
    height: var(--textarea-expanded-height);
    line-height: var(--textarea-expanded-line-height);
}

.tt-eins textarea:focus {
    color: var(--field-textcolor-focus);
    background: var(--field-backcolor-focus);
    border-bottom-color: var(--field-bordercolor-focus);
    transition: var(--transition-universal);
}

/* Disabled fields */
.tt-eins textarea[disabled] {
    background: var(--field-backcolor-disabled);
    padding-left: var(--field-width-disabled);
    cursor: not-allowed;
    line-height: var(--textarea-expanded-line-height);
    height: var(--textarea-expanded-height);
    border-color: transparent !important;
    border-bottom-color: var(--field-bordercolor-disabled) !important;
    border-radius: 0;
    color: var(--field-textcolor);
    -webkit-text-fill-color: var(--field-textcolor); /* override Safari's weird default */
    opacity: 1; /* override Safari's weird default */
}

.tt-eins .field-container:has(textarea[disabled]):before {
    content: "";
    display: block;
    background: var(--field-disabled-icon);
    width: 10px;
    height: 10px;
    margin-top: calc(4px + 4px);
    position: absolute;
    left: 0;
    top: var(--field-height-label);
}

/* Field actions */
.tt-eins .field-container.field-action:has(textarea) .primary-action {
    bottom: auto;
    top: var(--field-height-label);
}

/* Validation markers */
.tt-eins .field-entry.has-validation {
    textarea {
        border-bottom-width: 2px;
    }
    
    &.validation-ok textarea {
        border-bottom-color: var(--color-state-ok);
    }
    
    &.validation-warn textarea {
        border-bottom-color: var(--color-state-warn);
    }
    
    &.validation-crisis textarea {
        border-bottom-color: var(--color-state-crisis);
    }
}


/* --- Pulldown select fields */
.tt-eins select {
    outline: none;
    font: var(--textset-m);
    margin: 0;    
    width: 100%;
    height: var(--field-height);
    color: var(--field-textcolor);
    background-color: var(--field-backcolor);
    border-radius: var(--field-radius);
    border: 1px solid var(--field-bordercolor);
    padding: var(--field-padding);
    padding-right: var(--field-width-action);
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: var(--transition-universal);
}

@container layout-container (width < 680px) {
    .tt-eins select {
        font: var(--textset-l);
    }
}

/* Dropdown arrow */
.tt-eins .field-entry.entry-select .field-container:after {
    content: "";
    display: block;
    background: transparent url(../../static/media/TEMP_icon_action_menu.a88f3445b1b65e2c6399.svg) center no-repeat;
    width: 16px;
    height: 16px;
    margin-bottom: -8px;
    position: absolute;
    right: 10px;
    bottom: calc(var(--field-height) / 2);
    transform: rotateZ(0deg);
    pointer-events: none; /* allows click-through */
}

.tt-eins .field-entry.entry-select:has(select[disabled]) .field-container:after {
    display: none;
}

/* Interaction states */
@media (hover: hover) {
    .tt-eins select:hover {
        background: var(--field-backcolor-hover);
        border-color: var(--field-bordercolor-hover);
        transition: var(--transition-universal);
    }
}

.tt-eins select:focus {
    color: var(--field-textcolor-focus);
    border-bottom-color: var(--field-bordercolor-focus);
    background: var(--field-backcolor-focus);
    transition: var(--transition-universal);
}

/* Disabled fields */
.tt-eins select[disabled] {
    background: var(--field-backcolor-disabled);
    padding-left: var(--field-width-disabled);
    cursor: not-allowed;
    border-color: transparent !important;
    border-bottom-color: var(--field-bordercolor-disabled) !important;
    border-radius: 0;
    color: var(--field-textcolor);
    -webkit-text-fill-color: var(--field-textcolor); /* override Safari's weird default */
    opacity: 1; /* override Safari's weird default */
}

.tt-eins .field-container:has(select[disabled]):before {
    content: "";
    display: block;
    background: var(--field-disabled-icon);
    width: 10px;
    height: 10px;
    margin-bottom: -4px;
    position: absolute;
    left: 0;
    bottom: calc(var(--field-height) / 2);
}

/* Validation markers */
.tt-eins .field-entry.has-validation {
    select {
        border-bottom-width: 2px;
    }
    
    &.validation-ok select {
        border-bottom-color: var(--color-state-ok);
    }
    
    &.validation-warn select {
        border-bottom-color: var(--color-state-warn);
    }
    
    &.validation-crisis select {
        border-bottom-color: var(--color-state-crisis);
    }
}


/* --- Checkboxes */
/* Hide original input field */
.tt-eins input[type="checkbox"] {
    -moz-appearance: none;
    height: 0;
    width: 0;
    opacity: 0;
    position: absolute;
}

/* Arrange for fake checkbox visual */
.tt-eins .field-entry.entry-checkbox .field-container {
    padding-left: var(--option-padding);
}

/* Label */
.tt-eins .field-entry.entry-checkbox label {
    color: var(--option-textcolor);
    font-weight: 400;
    display: block;
    padding-top: 2px;
    transition: var(--transition-color-outline);
}

.tt-eins .field-entry.entry-checkbox label:has(.substance-entity), 
.tt-eins .field-entry.entry-checkbox label:has(.substance-id) {
    padding-top: 0;
    margin-top: -2px;
}

.tt-eins .field-entry.entry-checkbox label.substance-richtext p {
    margin-bottom: 0;
}

.tt-eins .field-entry.entry-checkbox.entry-unlabeled {
    width: var(--option-padding);
    height: calc(var(--option-size) + 6px); /* enough space for focus outline */
    overflow: visible;
}

.tt-eins .field-entry.entry-checkbox.entry-unlabeled label {
    width: 0.01px;
    overflow: hidden;
}

/* Visual marker */
.tt-eins .field-entry.entry-checkbox {
    --option-offset: 0px;
}

.tt-eins .field-entry.entry-checkbox:has(label > .substance-entity) {
    --option-offset: 2px;
}

.tt-eins .field-entry.entry-checkbox label:before {
    content: "";
    position: absolute;
    left: 0;
    top: var(--option-offset);
    width: var(--option-size);
    height: var(--option-size);
    border-radius: var(--option-radius);
    border: 1px solid var(--option-bordercolor);
    background: var(--option-backcolor);
    transition: var(--transition-color);
}

.tt-eins .field-entry.entry-checkbox input:checked + label:before {
    background: var(--option-backcolor-checked);
    transition: var(--transition-color);
}

.tt-eins .field-entry.entry-checkbox input:checked + label:after {
    content: "";
    position: absolute;
    left: 3px;
    top: calc(3px + var(--option-offset));
    width: 12px;
    height: 12px;
    background: transparent center url(../../static/media/icon_action_save_white.6a5411904ecbbae45ca3.svg) no-repeat;
    background-size: contain;
}

/* Disabled state */
.tt-eins .field-entry.entry-checkbox .field-container:has(input[disabled]) {
    padding-left: var(--option-padding-disabled);
}

.tt-eins .field-entry.entry-checkbox .field-container:has(input[disabled]):before {
    content: "";
    display: block;
    background: var(--field-disabled-icon);
    width: 10px;
    height: 10px;
    position: absolute;
    left: var(--option-padding);
    top: calc(4px + var(--option-offset));
}

.tt-eins .field-entry.entry-checkbox input[disabled] + label:before {
    background-color: var(--option-backcolor-disabled);
    border-color: var(--option-bordercolor-disabled);
}

.tt-eins .field-entry.entry-checkbox input[disabled]:checked + label:after {
    background-image: url(../../static/media/icon_action_save_brown.ae901c7e37f37e3c3fa9.svg);
}

/* Interaction states */
@media (hover: hover) {
    .tt-eins .field-entry.entry-checkbox input:not([disabled]) + label:hover {
        cursor: pointer;
        color: var(--option-textcolor-hover);
        transition: var(--transition-color);
    }
    
    .tt-eins .field-entry.entry-checkbox input:not([disabled]) + label:hover .substance-entity {
        color: var(--option-textcolor-hover);
    }
    
    .tt-eins .field-entry.entry-checkbox input:not([disabled]) + label:hover:before {
        background-color: var(--option-backcolor-hover);
        border-color: var(--option-bordercolor-hover);
        transition: var(--transition-color);
    }
    
    .tt-eins .field-entry.entry-checkbox input:checked:not([disabled]) + label:hover:before {
        background-color: var(--option-backcolor-checked-hover);
        transition: var(--transition-color);
    }
}

.tt-eins .field-entry.entry-checkbox:not(.entry-unlabeled) .field-container:has(*:focus-visible) label {
    outline: var(--focus-outline-standard);
    outline-offset: 3px;
    transition: var(--transition-color-outline);
}

.tt-eins .field-entry.entry-checkbox:not(.entry-unlabeled) input:active + label {
    outline: 1px solid var(--option-bordercolor-active);
    outline-offset: 3px;
    color: var(--option-textcolor-active);
    transition: var(--transition-color-outline);
}

/* Edge case: focus & active state for checkboxes with invisible label (used for row selection in tables) */
.tt-eins .field-entry.entry-checkbox.entry-unlabeled .field-container:has(*:focus-visible) label:before {
    outline: var(--focus-outline-standard);
    outline-offset: 4px;
    transition: var(--transition-color-outline);
}

.tt-eins .field-entry.entry-checkbox.entry-unlabeled .field-container:has(input:active) label:before {
    outline: 1px solid var(--option-bordercolor-active);
    outline-offset: 4px;
    transition: var(--transition-color-outline);
}


/* --- Radio buttons */
/* Hide original input field */
.tt-eins input[type="radio"] {
    -moz-appearance: none;
    height: 0;
    width: 0;
    opacity: 0;
    position: absolute;
}

/* Arrange for fake radio visual */
.tt-eins .field-entry.entry-radio .field-container {
    padding-left: var(--option-padding);
}

/* Label */
.tt-eins .field-entry.entry-radio label {
    color: var(--option-textcolor);
    font-weight: 400;
    display: block;
    padding-top: 1px;
    transition: var(--transition-color-outline);
}

.tt-eins .field-entry.entry-radio label:has(.substance-entity) {
    padding-top: 0;
    margin-top: -2px;
}

.tt-eins .field-entry.entry-radio label.substance-richtext p {
    margin-bottom: 0;
}

/* Visual marker */
.tt-eins .field-entry.entry-radio {
    --option-offset: 0px;
}

.tt-eins .field-entry.entry-radio:has(label > .substance-entity) {
    --option-offset: 3px;
}

.tt-eins .field-entry.entry-radio label:before {
    content: "";
    position: absolute;
    left: 0;
    top: var(--option-offset);
    width: var(--option-size);
    height: var(--option-size);
    border-radius: 50%;
    border: 1px solid var(--option-bordercolor);
    background: var(--option-backcolor);
    transition: var(--transition-color);
}

.tt-eins .field-entry.entry-radio input:checked + label:before {
    background: var(--option-backcolor-checked);
    transition: var(--transition-color);
}

.tt-eins .field-entry.entry-radio input:checked + label:after {
    content: "";
    position: absolute;
    left: 4px;
    top: calc(4px + var(--option-offset));
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--option-backcolor-marker);
}

/* Disabled state */
.tt-eins .field-entry.entry-radio .field-container:has(input[disabled]) {
    padding-left: var(--option-padding-disabled);
}

.tt-eins .field-entry.entry-radio .field-container:has(input[disabled]:checked):before {
    content: "";
    display: block;
    background: var(--field-disabled-icon);
    width: 10px;
    height: 10px;
    position: absolute;
    left: var(--option-padding);
    top: calc(4px + var(--option-offset));
}

.tt-eins .field-entry.entry-radio input[disabled] + label:before {
    background-color: var(--option-backcolor-disabled);
    border-color: var(--option-bordercolor-disabled);
}

.tt-eins .field-entry.entry-radio input[disabled]:checked + label:after {
    background-color: var(--option-backcolor-disabled-marker);
}

/* Interaction states */
@media (hover: hover) {
    .tt-eins .field-entry.entry-radio input:not([disabled]) + label:hover {
        cursor: pointer;
        color: var(--option-textcolor-hover);
        transition: var(--transition-color-outline);
    }
    
    .tt-eins .field-entry.entry-radio input:not([disabled]) + label:hover .substance-entity {
        color: var(--option-textcolor-hover);
    }
    
    .tt-eins .field-entry.entry-radio input:not([disabled]) + label:hover:before {
        background-color: var(--option-backcolor-hover);
        border-color: var(--option-bordercolor-hover);
        transition: var(--transition-color);
    }
    
    .tt-eins .field-entry.entry-radio input:checked:not([disabled]) + label:hover:before {
        background-color: var(--option-backcolor-checked-hover);
        transition: var(--transition-color);
    }
}

.tt-eins .field-entry.entry-radio .field-container:has(*:focus-visible) label {
    outline: var(--focus-outline-standard);
    outline-offset: 2px;
    transition: var(--transition-color-outline);
}

.tt-eins .field-entry.entry-radio input:active + label {
    outline: 1px solid var(--option-bordercolor-active);
    outline-offset: 3px;
    color: var(--option-textcolor-active);
    transition: var(--transition-color-outline);
}


/* --- Range sliders */
.tt-eins input[type="range"] {
    width: 100%;
    margin: 0;
    height: var(--field-height);
    margin-top: -7px;
    background: transparent;
    -webkit-appearance: none;
}

@-moz-document url-prefix() {
    .tt-eins input[type="range"] {
        padding-top: 6px;
        margin-top: -4px;
    }
}

/* Thumb element */
.tt-eins input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    cursor: pointer;
    width: 15px;
    height: var(--field-height);
    border: 1px solid var(--field-bordercolor-focus);
    border-radius: var(--field-radius);
    background: var(--option-backcolor);
    margin-top: -13.5px;
    -webkit-transition: var(--transition-color);
    transition: var(--transition-color);
}

@media (hover: hover) {
    .tt-eins input[type=range]:hover::-webkit-slider-thumb {
        background: #fff;
        border-color: #000;
        -webkit-transition: var(--transition-color);
        transition: var(--transition-color);
    }
}

.tt-eins input[type=range]::-moz-range-thumb {
    cursor: pointer;
    width: 15px;
    height: var(--field-height);
    border: 1px solid var(--field-bordercolor-focus);
    border-radius: var(--field-radius);
    background: var(--option-backcolor);
    -moz-transition: var(--transition-color);
    transition: var(--transition-color);
}

/* Thumb element: Interaction states */
@media (hover: hover) {
    .tt-eins input[type=range]:hover::-moz-range-thumb {
        background: #fff;
        border-color: #000;
        -moz-transition: var(--transition-color);
        transition: var(--transition-color);
    }
}

/* Track element */
.tt-eins input[type=range]::-webkit-slider-runnable-track {
    margin-top: 13.5px;
    height: 4px;
    width: 100%;
    background: var(--actioncolor);
    border-radius: var(--field-radius);
}

.tt-eins input[type=range]::-moz-range-track {
    height: 4px;
    width: 100%;
    background: var(--actioncolor);
    border-radius: var(--field-radius);
}

/* Track element: Interaction states */
@media (hover: hover) {
    .tt-eins input[type=range]:hover::-webkit-slider-runnable-track {
        background: #000;
        cursor: pointer;
    }
    
    .tt-eins input[type=range]:hover::-moz-range-track {
        background: #000;
        cursor: pointer;
    }
}

/* Entire range slider: Interaction states */
.tt-eins input[type="range"]:focus {
    outline: none;
}

.tt-eins .field-container:has(input[type="range"]:focus-visible) {
    outline: var(--focus-outline-standard);
    outline-offset: 4px;
}


/* --- Field comments + error states */
.tt-eins .field-entry .field-comment {
    display: block;
    padding-top: 5px;
    color: var(--textcolor-standard);
    font: var(--textset-s);
    font-weight: 400;
}

@container layout-container (width < 680px) {
    .tt-eins .field-entry .field-comment {
        font: var(--textset-plus-s);
        font-weight: 400;
    }
}

/* Comments for special field types (have to handle multiple comments too) */
.tt-eins .field-entry.entry-checkbox .field-comment {
    margin-top: 5px;
}

.tt-eins .field-entry.radio-group .field-comment, 
.tt-eins .field-entry.checkbox-group .field-comment {
    margin-top: 10px;
    padding-top: 5px;
    width: -moz-max-content;
    width: max-content;
    max-width: 100%;
}

/* Error messages in comments */
.tt-eins .field-entry.has-validation .field-comment {
    padding: 5px 5px 5px 25px;
    background: transparent 4px 4px no-repeat;
    background-size: 15px;
}

.tt-eins .field-entry.has-validation .field-comment * {
    font-weight: 600;
    color: #000;
}

.tt-eins .field-entry.has-validation.validation-ok .field-comment {
    background-image: url(../../static/media/icon_validation_ok.5ad815141651a003dd58.svg);
    background-color: var(--field-statecolor-ok);
}

.tt-eins .field-entry.has-validation.validation-warn .field-comment {
    background-image: url(../../static/media/icon_validation_warning.eff586cc341c8b81d587.svg);
    background-color: var(--field-statecolor-warn);
}

.tt-eins .field-entry.has-validation.validation-crisis .field-comment {
    background-image: url(../../static/media/icon_validation_crisis.5697c91c77019e1bae21.svg);
    background-color: var(--field-statecolor-crisis);
}

.tt-eins .field-entry.radio-group .field-comment, 
.tt-eins .field-entry.checkbox-group .field-comment { 
    border-top: var(--line-standard);
}

.tt-eins .field-entry.radio-group.has-validation .field-comment, 
.tt-eins .field-entry.checkbox-group.has-validation .field-comment {
    border-width: 2px;
}

.tt-eins .field-entry.radio-group.has-validation.validation-ok .field-comment, 
.tt-eins .field-entry.checkbox-group.has-validation.validation-ok .field-comment {
    border-color: var(--color-state-ok);
}

.tt-eins .field-entry.radio-group.has-validation.validation-warn .field-comment, 
.tt-eins .field-entry.checkbox-group.has-validation.validation-warn .field-comment {
    border-color: var(--color-state-warn);
}

.tt-eins .field-entry.radio-group.has-validation.validation-crisis .field-comment, 
.tt-eins .field-entry.checkbox-group.has-validation.validation-crisis .field-comment {
    border-color: var(--color-state-crisis);
}

/* Edge case: Don't show comments when the the field entry has an active helper flyout */
.tt-eins .field-entry.substance-flyout.flyout-active .field-comment {
    display: none;
}


/* !-------------------------------------------- */
/* !COMPONENT: Images & Documents */
/* !-------------------------------------------- */

/* --- Container */
.tt-eins .substance-file {
    width: 100%;
    position: relative;
    
    --container-background: var(--backcolor-standard);

    /* Thumbnail container */
    .file-thumbnail {
        width: 100%;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        position: relative;
        background: var(--container-background) center no-repeat;
        background-size: 22px;
    }
    
    &.file-message-compact:has(.substance-message.message-level-ok) {
        --container-background: var(--color-state-ok-light);
    }
    
    /* Thumbnail container: Placeholder icons */
    &.file-image:not(:has(img)) .file-thumbnail {
        background-image: url(../../static/media/icon_attachment_image.8b95b6d07831d9f515b2.svg);
    }
    
    &.file-document .file-thumbnail {
        background-image: url(../../static/media/icon_attachment_file.bea84c4af893b17ce80e.svg);
    }
    
    /* Links for downloads or viewer */
    .file-thumbnail .link-action {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        transition: var(--transition-opacity);
    }
    
    /* Interaction states */
    @media (hover: hover) {
        &.file-image .file-thumbnail .link-action:hover {
            opacity: 0.6;
            background: rgba(255,255,255,0.5);
            transition: var(--transition-opacity);
            cursor: zoom-in;
        }
        
        &.file-document .file-thumbnail .link-action:hover .file-name {
            color: #000;
        }
    }
    
    .file-thumbnail .link-action:focus-visible {
        outline-offset: -5px;
    }
    
    &.file-document .file-thumbnail .link-action:focus-visible {
        outline-offset: 2px;
    }
}


/* --- Optional messages */
.tt-eins .substance-file {
    .substance-message {
        padding: 5px;
        background: #fff;
        position: absolute;
        top: 8px;
        left: 8px;
        z-index: 2;
    }
    
    .substance-message .substance-richtext h4 {
        margin: 0;
    }
    
    /* Message reduced to icon only */
    &.file-message-compact .substance-message {
        padding: 0;
        background: transparent;
    }
    
    &.file-message-compact .substance-message .substance-richtext h4 {
        width: 24px;
        height: 20px;
        background-size: 20px;
        overflow: hidden;
    }
}


/* --- Optional ID marker */
.tt-eins .substance-file .file-assignment {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: flex;
    -moz-column-gap: 4px;
         column-gap: 4px;
    align-items: flex-end;
    color: var(--textcolor-standard);
    --backcolor-id-point: #fff;
}


/* --- Actual images */
.tt-eins .substance-file .file-thumbnail img {
    display: inline-block;
    width: 100%;
    height: 100%;
    min-height: 100%; /* fix for Safari */
    -o-object-fit: contain;
       object-fit: contain;
}


/* --- Images in active cropping mode */
.tt-eins .substance-file.image-cropping {
    --grid-line-bright: 1px solid rgba(255, 255, 255, 0.5);
    --grid-line-dark: 1px solid rgba(0, 0, 0, 0.5);
    
    /* Switch off messages + background icon */
    .substance-message {
        display: none;
    }
    
    .file-thumbnail {
        background-image: none;
    }
    
    /* Cropping container */
    .file-thumbnail.reactEasyCrop_Container {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
        -webkit-user-select: none;
           -moz-user-select: none;
                user-select: none;
        touch-action: none;
        cursor: move;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Image */
    .file-thumbnail img {
        height: auto;
        width: auto;
        min-height: 0;
    }
    
    img.reactEasyCrop_Image,
    .reactEasyCrop_Video {
        will-change: transform;
    }
    
    img.reactEasyCrop_Contain {
        max-width: 100%;
        max-height: 100%;
        margin: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
    
    .reactEasyCrop_Cover_Horizontal {
        width: 100%;
        height: auto;
    }
    
    .reactEasyCrop_Cover_Vertical {
        width: auto;
        height: 100%;
    }
    
    /* Grid display */
    .reactEasyCrop_CropArea {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 100%; /* don't need to change that via inline styles */
        transform: translate(-50%, -50%);
        border: var(--grid-line-bright);
        box-shadow: 0 0 0 9999em;
        color: rgba(0, 0, 0, 0.5);
        overflow: hidden;
    }
    
    .reactEasyCrop_CropAreaRound {
        border-radius: 50%;
    }
    
    .reactEasyCrop_CropAreaGrid:before {
        content: ' ';
        position: absolute;
        border: var(--grid-line-bright);
        outline: var(--grid-line-dark);
        top: 0;
        bottom: 0;
        left: 33.33%;
        right: 33.33%;
        border-top: 0;
        border-bottom: 0;
    }
    
    .reactEasyCrop_CropAreaGrid:after {
        content: ' ';
        position: absolute;
        border: var(--grid-line-bright);
        outline: var(--grid-line-dark);
        top: 33.33%;
        bottom: 33.33%;
        left: 0;
        right: 0;
        border-left: 0;
        border-right: 0;
    }
}


/* --- File names (for documents or broken images) */
.tt-eins .substance-file .file-name {
    font: var(--textset-s);
    font-weight: 500;
    color: var(--textcolor-standard);
    text-align: center;
    position: absolute;
    left: 5px;
    right: 5px;
    bottom: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* --- Optional: Image controls */
.tt-eins .substance-file .substance-toolchain {
    display: none;
    border-top: var(--line-standard);
    background-color: var(--container-background);
    padding: 6px;
    align-items: flex-start;
    min-height: 31px; /* needed when we only have a slider control */
    
    &.item-active {
        display: flex;
    }
    
    /* Last button always goes right */
    .toolchain-link:last-child:not(:only-child) {
        margin-left: auto;
    }
}

/* Image cropping: Stand-alone slider goes middle */
.tt-eins .substance-file.image-cropping .substance-toolchain .toolchain-link:only-child {
    margin: 0 auto 0 auto;
    width: 50%;
}


/* !-------------------------------------------- */
/* !COMPONENT: Tables */
/* !-------------------------------------------- */

.tt-eins table {
    width: 100%;
    border-collapse: collapse;
}


/* --- Column titles */
.tt-eins .substance-table thead th {
    --column-title-padding: 10px;
    padding: 0;
    text-align: left;
    vertical-align: bottom;
    font: var(--textset-plus-s);
    font-weight: 400;
    color: #000;
    transition: var(--transition-color);
    
    /* Static titles without sorting functionality */
    & > p {
        position: relative;
        padding: var(--column-title-padding);
        white-space: nowrap;
    }
    
    & > p.table-hidden-text {
        clip: rect(1px, 1px, 1px, 1px);
        clip-path: inset(50%);
        height: 1px;
        width: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
    }
    
    /* Abbreviated column title */
    abbr {
        display: inline-block;
        width: 100%;
    }
    
    abbr:after {
        content: "…";
    }
    
    /* Indicator for sort direction (default sorting order is ascending) */
    /* TODO: remove support for legacy .sort-action.action-dir-* classes */
    &[aria-sort] .sort-action, 
    &:not([scope]) .sort-action:not(.action-dir-none), 
    &[aria-sort] > p {
        padding-left: 28px;
    }
    
    &[aria-sort] .sort-action:before, 
    &:not([scope]) .sort-action:is(.action-dir-asc, .action-dir-desc):before, 
    &[aria-sort] > p:before {
        content: "";
        display: block;
        position: absolute;
        bottom: 11px;
        left: 10px;
        height: 14px;
        width: 14px;
        background: transparent url(../../static/media/icon_action_sort_black.ac5722b267196a9edb2b.svg) center no-repeat;
        transition: var(--transition-transform);
    }
        
    &[aria-sort="descending"] .sort-action:before, 
    &:not([scope]) .sort-action.action-dir-desc:before, 
    &[aria-sort="descending"] > p:before {
        transform: rotateX(180deg);
        transition: var(--transition-transform);
    }
}


/* --- Body table rows */
.tt-eins .substance-table {
    /* Horizontal divider lines */
    tbody tr {
        border-top: 1px solid var(--linecolor-light);
    }
    
    /* Horizontal divider to column titles */
    thead + tbody tr:first-child {
        border-top: var(--line-signature);
    }
    
    /* Highlighted rows: used for last visited entity in an ObjectView */
    tr.row-highlight td:first-child {
        border-left: var(--line-active);
        padding-left: 6px;
    }
    
    /* Special rows: selected (e.g. for multi-row operations) */
    tr.row-selected td {
        background-color: var(--backcolor-selection);
    }
}


/* --- Cell content */
.tt-eins .substance-table {
    td {
        text-align: left;
        vertical-align: top;
        padding: 14px 10px 14px 10px;
        font: var(--textset-m);
        color: var(--textcolor-standard);
    }
    
    /* Cell types */
    td.col-compact {
        text-align: center;
    }
    
    td.col-right, 
    td.col-numeric {
        text-align: right;
    }
    
    /* Sorted column */
    td.col-highlight {
        background-color: var(--backcolor-standard);
    }
    
    tbody td.col-sorted {
        border-top: 4px solid var(--linecolor-light);
        padding-top: 13px;
    }
    
    tbody tr:first-child td.col-sorted {
        padding-top: 15px;
    }
    
    /* Marked cells */
    td.col-marked, 
    tr.row-highlight td.col-marked {
        background: var(--backcolor-marker);
    }
    
    td.col-marked p {
        color: #000;
    }
    
    /* Special cell content: entities */
    .substance-entity {
        display: block;
        width: -moz-min-content;
        width: min-content;
    }
    
    .substance-entity.entity-icon, 
    .substance-entity.entity-validation.validation-unlabeled {
        display: inline-block; /* these are usually centered */
    }
    
    .col-main .substance-entity, 
    .substance-entity.entity-channel, 
    .substance-entity.entity-trip, 
    .substance-entity.entity-user {
        width: auto;
    }
    
    * + .substance-entity {
        margin-top: 5px; 
    }
    
    * + .substance-timestamp {
        margin-top: 10px; 
    }
    
    * + .substance-entity.entity-comment {
        margin-left: 30px;
    }
    
    /* Special cell content: atomic editors */
    * + .substance-editor {
        margin-top: 10px; 
    }
    
    .substance-editor:not(.editor-mutable) {
        padding-right: 24px;
    }
    
    /* Special cell content: flyouts */
    td > .substance-flyout {
        width: -moz-min-content;
        width: min-content;
    }
    
    td:last-child > .substance-flyout {
        width: auto;
    }
    
    * + .substance-flyout {
        margin-top: 5px;
    }
    
    tbody td:nth-last-child(-n + 3) > .substance-toolchain .flyout-host, 
    tbody td:nth-last-child(-n + 3) > .substance-flyout .flyout-host {
        left: auto;
        right: 0;
        transform: none;
    }
    
    /* Special cell content: email addresses */
    td > .email-action {
        min-width: 10ch;
    }
    
    td > .email-action + p {
        margin-top: 10px;
    }
    
    /* Special cell content: longform content */
    td.cell-longform .longform-head {
        font-weight: 600;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--linecolor-light);
        margin-bottom: 10px;
    }
    
    td.cell-longform .longform-content {
        max-height: 5rem;
        overflow: auto;
    }
    
    /* Special cell content: toolchains */
    td > .substance-toolchain {
        display: inline-flex;
    }
    
    /* Special cell content: Checkbox for row selection */
    td:has(.field-entry.entry-checkbox.entry-unlabeled:only-child) {
        text-align: center;
    }
    
    td .field-entry.entry-checkbox.entry-unlabeled {
        display: block;
    }
}


/* --- Clickable cell content leading to ObjectViews */
.tt-eins .substance-table tbody td:first-child .link-action, 
.tt-eins .substance-table tbody td:first-child .link-action > .substance-id, 
.tt-eins .substance-table tbody td:first-child .link-action > .substance-entity.entity-state {
    display: block;
    width: 100%;
}

/* IDs with suffices */
.tt-eins .substance-table td:first-child {
    span:not([class]) {
        display: inline-block;
    }
    
    .substance-id .id-suffix {
        display: block;
        margin-left: 0;
    }
    
    .substance-id .id-suffix.suffix-point {
        display: inline-block;
    }
    
    .entity-state .substance-id {
        line-height: 21px;
        vertical-align: top;
        width: 100%;
        display: inline-flex;
        -moz-column-gap: 4px;
             column-gap: 4px;
    }
    
    .entity-state .substance-id .id-suffix.suffix-point {
        display: block;
        margin-left: auto;
        height: 21px;
        line-height: 17px;
    }
}

/* Sometimes we have unclickable content in the first column */
.tt-eins .substance-table tbody td:first-child > p:not(.substance-entity) {
    font-weight: 400;
}

/* Main column should always have a clickable link (should be .substance-entity) */
.tt-eins .substance-table td.col-main .link-action > * {
    font-weight: 700;
}

@media (hover: hover) {
    .tt-eins .substance-table tbody td.col-main .link-action:hover > * {
        color: #000;
        transition: var(--transition-color);
    }
}


/* --- Special table type: attachments list */
.substance-table.table-attachments {
    tr:first-child {
        border-top: none;
    }
    
    td:first-child {
        padding-left: 0;
        padding-right: 0;
        width: 50px;
    }
    
    td:first-child .substance-file .substance-message {
        top: 4px;
        left: 4px;
    }
    
    td:nth-child(2) .substance-id {
        margin-right: 4px;
    }
    
    td:nth-child(2) .substance-timestamp {
        display: inline-block;
        margin-top: 0;
        vertical-align: middle;
    }
    
    td:nth-child(2) .substance-entity.entity-attachment, 
    td:nth-child(2) .substance-entity.entity-user {
        margin-top: 10px;
    }
    
    td:nth-child(2) .substance-entity.entity-attachment {
        width: 100%;
        word-break: break-all;
        -ms-word-break: break-all;
    }
    
    td:last-child {
        padding-right: 0;
    }
}

/* -------------------------------------------- */
/* Codebox Transity */
/* Version: 351 */
/* -------------------------------------------- */
/* Created by @twotribes, Germany */
/* -------------------------------------------- */
/* StyleSheet Scope: BIG ACTOR-INDEPENDENT RESOURCES */
/* -------------------------------------------- */

/* -------------------------------------------- */
/* !Central property definitions */
/* Declared here to have it available for embedded public Creators + internal apps */
/* -------------------------------------------- */

.tt-eins {
    /* --- COLOR: definitions */
    /* Transity product colors */
    --transity-sand-100: #675e4f;
    --transity-sand-90-x: #8d867b; /* equal to rgba(141, 134, 123, 1) */
    --transity-sand-70-x: #927e5e;
    --transity-sand-60-x: #a78c88;
    --transity-sand-50-x: #b4a48b;
    --transity-sand-45-x: #bfc0c2;
    --transity-sand-40-x: #c0bfbb;
    --transity-sand-30-x: #e2dcd2;
    --transity-sand-25-x: #f0ede8;
    --transity-sand-20-x: #f1f0ec; /* equal to rgba(241, 240, 236, 1) */
    --transity-sand-10-x: #f7f6f4; /* equal to rgba(247, 246, 244, 1) */
    --transity-sand-5-x: #fafaf9; /* TODO: temp value for 6.13+ */
    
    --transity-red-100: #aa5c50;
    
    --transity-blue-100: rgba(64, 102, 150, 1); /* equal to #406696 */
    --transity-blue-70: rgba(64, 102, 150, 0.7);
    --transity-blue-50-x-solid: #4c96db;
    --transity-blue-20: rgba(64, 102, 150, 0.2);
    --transity-blue-10: rgba(64, 102, 150, 0.1);
    --transity-blue-5-x: #f4fbfc;
    
    --transity-green-100: #66806c;
    --transity-green-50-x: #80AE98;
    --transity-green-20-x: #e7e6d6;
    
    --transity-yellow-100: #caa648;
    --transity-yellow-10-x: #f4edda;
    --transity-yellow-5-x: #FBF8F0;
    
    /* Transity state colors */
    --transity-state-ok-100: rgba(186, 207, 0, 1); /* equal to #BCCF00 */
    --transity-state-ok-60: rgba(186, 207, 0, 0.6);
    --transity-state-ok-30: rgba(186, 207, 0, 0.3);
    --transity-state-ok-10: rgba(186, 207, 0, 0.1);
    --transity-state-ok-10-solid: rgb(248, 250, 235);
    
    --transity-state-warn-100: rgba(245, 160, 0, 1); /* equal to #F6A000 */
    --transity-state-warn-60: rgba(245, 160, 0, 0.6);
    --transity-state-warn-30: rgba(245, 160, 0, 0.3);
    --transity-state-warn-10: rgba(245, 160, 0, 0.1);
    --transity-state-warn-10-solid: rgb(254, 246, 234);
    
    --transity-state-crisis-100: rgba(232, 78, 15, 1); /* equal to #E84E0F */
    --transity-state-crisis-60: rgba(232, 78, 15, 0.6);
    --transity-state-crisis-30: rgba(232, 78, 15, 0.3);
    --transity-state-crisis-10: rgba(232, 78, 15, 0.1);
    --transity-state-crisis-10-solid: rgb(254, 237, 232);
    
    /* Transity workflow colors */
    --transity-flow-1: #C99400;
    --transity-flow-2: #8D7684;
    --transity-flow-3: #BF6185;
    --transity-flow-4: #8DA484;
    --transity-flow-5: var(--transity-sand-30-x);
    
    
    /* --- COLOR: semantic assignments */
    /* UI baseline colors */
    --transity-base: var(--transity-sand-100);
    --transity-action: var(--transity-blue-100);
    
    /* Stateful colors */
    --color-state-info: var(--transity-sand-100);
    
    --color-state-ok: var(--transity-state-ok-100);
    --color-state-ok-light: var(--transity-state-ok-10);
    --color-state-ok-light-solid: var(--transity-state-ok-10-solid);
    --color-state-ok-medium: var(--transity-state-ok-30);
    --color-state-ok-dark: var(--transity-state-ok-60);
    
    --color-state-warn: var(--transity-state-warn-100);
    --color-state-warn-light: var(--transity-state-warn-10);
    --color-state-warn-light-solid: var(--transity-state-warn-10-solid);
    --color-state-warn-medium: var(--transity-state-warn-30);
    
    --color-state-crisis: var(--transity-state-crisis-100);
    --color-state-crisis-light: var(--transity-state-crisis-10);
    --color-state-crisis-light-solid: var(--transity-state-crisis-10-solid);
    --color-state-crisis-medium: var(--transity-state-crisis-30);
    
    --color-state-open: var(--transity-flow-1);
    --color-state-progress: var(--transity-flow-2);
    --color-state-transfer: var(--transity-flow-3);
    --color-state-completed: var(--transity-flow-4);
    --color-state-archived: var(--transity-flow-5);
    
    
    /* --- BACKGROUNDS */
    --backcolor-standard: var(--transity-sand-10-x);
    --backcolor-active: var(--transity-sand-50-x);
    --backcolor-block: var(--transity-sand-5-x); /* only used for ObjectView block backgrounds */
    --backcolor-counter: var(--transity-sand-100);
    --backcolor-bullet: var(--transity-sand-40-x); /* only used for bullet points and uploader image container */
    --backcolor-marker: var(--color-state-warn-light-solid);
    --backcolor-selection: var(--transity-blue-5-x); 
    --backcolor-accent: var(--transity-red-100);
    --backcolor-id-point: var(--transity-sand-20-x);
    
    --backcolor-dark: var(--transity-sand-90-x);
    --backcolor-medium: var(--transity-sand-30-x); /* only used for .sort-action */
    
    --backcolor-login-page: #db0; /* depends on default background image, is replaced by client_primary.css */
    --backcolor-login-form: rgba(141, 134, 123, 0.6); /* based on --transity-sand-90-x */
    --backcolor-login-vendor: rgba(241, 240, 236, 0.8); /* based on --transity-sand-20-x */
    --backcolor-login-prototype: rgba(247, 246, 244, 0.9); /* based on --transity-sand-10-x */
    
    --backcolor-uploader-progress: var(--transity-state-warn-100);
    
    --backcolor-overlay-blocker: rgba(241, 240, 236, 0.4); /* based on --transity-sand-20-x */
    
    /* Background gradients */
    --gradient-internal-stripe: rgba(0,0,0, 0.2);
    --gradient-internal-gap: transparent;
    --gradient-internal-hatched: linear-gradient(135deg, 
        var(--gradient-internal-gap) 25%, 
        var(--gradient-internal-stripe) 25%, 
        var(--gradient-internal-stripe) 50%, 
        var(--gradient-internal-gap) 50%, 
        var(--gradient-internal-gap) 75%, 
        var(--gradient-internal-stripe) 75%, 
        var(--gradient-internal-stripe) 100%);
        
    --gradient-nav-main: linear-gradient(to bottom, var(--transity-sand-50-x), var(--transity-sand-70-x));
    --gradient-nav-header: linear-gradient(to bottom, #fff, var(--transity-sand-20-x));
    
    --gradient-tab-bar: linear-gradient(to bottom, #fff, var(--transity-sand-20-x));
    
    /* Text colors */
    --textcolor-init: #000;
    --textcolor-standard: var(--transity-base);
    --textcolor-accent: var(--transity-red-100);
    --textcolor-dimmed: var(--transity-sand-30-x);
    
    --textcolor-dashboard-time: var(--transity-green-100);
    --textcolor-dashboard-criteria: var(--transity-yellow-100);
    
    --textcolor-comment: var(--transity-green-50-x);
    
    
    /* --- LINES */
    --linecolor-dark: var(--transity-sand-60-x);
    --linecolor-active: var(--transity-sand-50-x);
    --linecolor-medium: var(--transity-sand-45-x);
    --linecolor-light: var(--transity-sand-30-x);
    
    --linecolor-standard: var(--transity-sand-25-x);
    --line-standard: 1px solid var(--linecolor-standard);
    --line-standard-thick: 2px solid var(--linecolor-standard);
    
    --line-signature-width: 6px;
    --line-signature: var(--line-signature-width) solid var(--linecolor-light);
    --line-signature-active: var(--line-signature-width) solid var(--linecolor-active);
    
    --line-active-width: 8px;
    --line-active: var(--line-active-width) solid var(--linecolor-active);
    
    --linecolor-accent: var(--transity-red-100);
    
    --line-flyouthost: 1px solid var(--linecolor-medium);
    --line-overlay: 1px solid var(--linecolor-medium);
    --line-tooltip: 1px solid var(--linecolor-accent);
        

    /* --- BUTTONS & LINKS */
    /* Default :focus-visible settings */
    --focus-outlinecolor: var(--actioncolor);
    --focus-outline-standard: 1.5px dashed var(--focus-outlinecolor);
    --focus-outline-inverse: 1.5px dashed #fff;
    --focus-outline-accent: 1.5px dashed var(--linecolor-accent);
    
    /* Standard buttons */
    --button-iconsize: 20px;
    
    --actioncolor: var(--transity-action);
    --actioncolor-hover: #000;
    --actioncolor-highlight: var(--transity-blue-50-x-solid);
    
    --actioncolor-text: var(--actioncolor);
    --actioncolor-text-hover: #000;
    
    --actioncolor-shade-light: var(--transity-blue-10);
    --actioncolor-shade-medium: var(--transity-blue-20);
    --actioncolor-shade: var(--transity-blue-70);
    
    --button-back-simple: var(--transity-blue-5-x);
    --button-height: 40px;
    --button-height-mini: 30px;
    
    --gradient-button: linear-gradient(to top, var(--button-back-simple), #fff);
    --gradient-button-hover: linear-gradient(to top, var(--button-back-simple), var(--button-back-simple));
    
    --gradient-button-solid: linear-gradient(to top, var(--actioncolor), var(--actioncolor-highlight));
    --gradient-button-solid-hover: linear-gradient(to top, var(--actioncolor), var(--actioncolor));
    
    /* Expanders */
    --expandcolor: var(--textcolor-accent);
    --expandcolor-hover: #000;
    
    /* Abstract links */
    --linkcolor: inherit;
    --linkcolor-hover: #000;

    /* Dashboard tiles */
    --backcolor-dashboard-time: var(--transity-green-20-x);
    --backcolor-dashboard-time-hover: var(--transity-sand-20-x);
    --backcolor-dashboard-criteria: var(--transity-yellow-10-x);
    --backcolor-dashboard-criteria-hover: var(--transity-yellow-5-x);
    

    /* --- FORM COMPONENTS: Colors */
    /* States + labels */
    --field-labelcolor: var(--textcolor-standard);
        
    --field-statecolor-ok: var(--color-state-ok-light-solid);
    --field-statecolor-warn: var(--color-state-warn-light-solid);
    --field-statecolor-crisis: var(--color-state-crisis-light-solid);
    
    /* Planar text-based elements */
    --field-textcolor: var(--textcolor-standard);
    --field-textcolor-focus: #000;
    
    --field-backcolor: var(--backcolor-standard);
    --field-backcolor-hover: #fff;
    --field-backcolor-focus: #fff;
    --field-backcolor-disabled: transparent;
    
    --field-bordercolor: var(--linecolor-standard);
    --field-bordercolor-hover: var(--linecolor-light);
    --field-bordercolor-focus: var(--transity-action);
    --field-bordercolor-disabled: var(--linecolor-standard);
    
    /* Small binary elements */
    --option-textcolor: var(--textcolor-standard);
    --option-textcolor-hover: #000;
    --option-textcolor-active: #000;
    
    --option-backcolor: var(--button-back-simple);
    --option-backcolor-checked: var(--actioncolor);
    --option-backcolor-hover: #fff;
    --option-backcolor-checked-hover: #000;
    --option-backcolor-disabled: var(--backcolor-standard);
    
    --option-backcolor-marker: #fff;
    --option-backcolor-disabled-marker: var(--backcolor-dark);
    
    --option-bordercolor: var(--actioncolor-shade);
    --option-bordercolor-light: var(--actioncolor-shade-light);
    --option-bordercolor-medium: var(--actioncolor-shade-medium);
    --option-bordercolor-hover: #000;
    --option-bordercolor-active: var(--actioncolor-shade-light);
    --option-bordercolor-disabled: var(--linecolor-light);

    
    /* --- FORM COMPONENTS: dimensions & distances */
    --field-height: 30px;
    --field-height-label: 20px;
    --field-padding: 4px;
    --field-radius: var(--radius-interaction);
    
    --field-width-action: 30px;
    --field-width-disabled: 14px;
    
    --option-size: 18px;
    --option-radius: var(--radius-interaction);
    --option-padding: 26px;
    --option-padding-disabled: 40px;
    
    --field-entry-margin: 17px;
    
    /* Defined on a deeper level in substances_small.css:
    --option-offset
    --field-disabled-icon
    */
    
    
    /* --- CONTAINERS */
    /* Box frames */
    --radius-interaction: 3px;
    --radius-panel: 5px;
    
    /* Box shadows */
    --shadow-soft: 
    0px 0.5px 0.8px rgba(0, 0, 0, 0.052),
    0px 1.5px 2.3px rgba(0, 0, 0, 0.075),
    0px 3.6px 5.4px rgba(0, 0, 0, 0.098),
    0px 12px 18px rgba(0, 0, 0, 0.15);

    --shadow-soft-mid-high: 
    0px 0px 2.1px rgba(0, 0, 0, 0.061),
    0px 0px 7.1px rgba(0, 0, 0, 0.089),
    0px 0px 32px rgba(0, 0, 0, 0.15);

    --shadow-soft-max-high: 
    0px 3.3px 3.6px rgba(0, 0, 0, 0.052),
    0px 9.1px 10px rgba(0, 0, 0, 0.075),
    0px 22px 24.1px rgba(0, 0, 0, 0.098),
    0px 73px 80px rgba(0, 0, 0, 0.15);

    --shadow-hard: 0 0 15px rgba(0,0,0,0.2);
    --shadow-hard-tight: 0 0 5px rgba(0,0,0,0.2);

    --shadow-flyout: var(--shadow-soft-max-high);
    --shadow-flyout-compact: var(--shadow-soft);
    --shadow-overlay: var(--shadow-soft-mid-high);
    --shadow-editor: var(--shadow-hard);
    --shadow-editor-button: var(--shadow-hard-tight);
    
    
    /* --- TRANSITIONS */
    --transition-universal: all 0.3s ease;
    --transition-width: width 0.5s ease;
    --transition-transform: transform 0.3s ease;
    --transition-opacity: opacity 0.3s ease, background 0.3s ease;
    --transition-color: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
    --transition-color-outline: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease, outline 0.3s ease;
    
    --transition-sidebar: color 0.3s ease, padding 0.3s ease, left 0.3s ease;
    

    /* --- TYPOGRAPHY */
    /* Baseline font */
    --font-base: "Aileron", "Helvetica", "Arial", sans-serif;
    --font-id: "JetBrains Mono";
    
    /* Size configurations */
    --textset-micro: 700 10px/13px var(--font-base);
    --textset-s: 700 11px/14px var(--font-base);
    --textset-plus-s: 700 12px/15px var(--font-base);

    --textset-m: 400 13px/16px var(--font-base);
    --textset-plus-m: 400 14px/19px var(--font-base);
    
    --textset-minus-l: 400 15px/20px var(--font-base);
    --textset-l: 400 16px/21px var(--font-base);
    --textset-plus-l: 200 18px/23px var(--font-base);
    --textset-xl: 200 20px/31px var(--font-base);
    --textset-xxl: 200 26px/33px var(--font-base);
    
    
    /* --- PAGE LAYOUT */
    /* Default widths */
    --site-gutter: 50px;
    --site-static-width: 1240px; /* legacy value */
    --site-width: var(--site-static-width); /* fallback for older browsers */
    /* Tablets get initialized to 1340px static viewport width via <meta> directive in <head> */
    
    --site-width: clamp(var(--site-static-width), calc(100vw - (2 * var(--site-gutter))), 1600px);
    
    /* Central headers */
    --main-navigation-height: 50px;
    --main-header-height: 85px;
    --main-ensemble-gutter: 10px;
    
    /* ObjectView controllers */
    --objectcontrol-height: 40px;
    
    /* ObjectView sidebar */
    --sidebar-static-width: 210px; /* legacy value */
    --sidebar-width: var(--sidebar-static-width); /* fallback for older browsers */
    --sidebar-width: clamp(var(--sidebar-static-width), calc(var(--site-width) * 0.2), 300px);
    --sidebar-missing-width: 180px;
    --sidebar-collapsed-width: 135px;
    
    --sidebar-gutter: 20px;
    
    /* Flyouts */
    --flyout-width-minimum: 280px;
    --flyout-width-standard: 340px;
    --flyout-width-medium: 530px;
    --flyout-width-maxi: 720px;
    --flyout-width-mega: var(--site-static-width);
    
    --flyout-sidebar-width: var(--flyout-width-minimum);
    
    /* Overlay window */
    --overlay-width-minimum: 760px;
    --overlay-width-maximum: var(--site-static-width);
    --overlay-viewport-distance: 50px;
    
    /* Layout breakpoint management (magic numbers)
    @container name: layout-container
    @container name: route-container
    
    layout-container Breakpoint 1: 800px 
    Usage: Creator elements (block controllers + summary)

    layout-container Breakpoint 2: 680px
    Usage: all form fields, Creator elements (full mobile switch)

    route-container Breakpoint 1: 660px
    Usage: Creator route table (first mobile switch)
    
    route-container Breakpoint 2: 600px
    Usage: Creator route table (full mobile switch)
    
    Viewport Breakpoint 1: 736px
    Usage: internal Creator overlay width
    */
}


/* !-------------------------------------------- */
/* !COMPONENT: Waiting animation */
/* !-------------------------------------------- */

.tt-eins .substance-updating {
    position: relative;
    animation: bubble-up 1s ease forwards 0.3s;
}

@keyframes bubble-up {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(0.75);
    }
    50% {
        transform: scale(1.25);
    }
    100% {
        transform: scale(1);
    }
}


/* !-------------------------------------------- */
/* !COMPONENT: Protected buttons with confirmation dialog */
/* !-------------------------------------------- */

.tt-eins .substance-protector {
    /* --- Protector container */
    &:not(.protector-type-floating).item-active {
        border: 1px solid var(--linecolor-medium);
        border-radius: var(--radius-interaction);
        background: #fff;
        padding: 10px;
    }

    &.protector-type-floating {
        position: relative;
        
        /* Optional flyout container */
        &.item-active .protector-flyout {
            position: absolute;
            border: 1px solid var(--linecolor-standard);
            border-radius: var(--radius-interaction);
            background: #fff;
            padding: 10px;
            box-shadow: var(--shadow-flyout-compact);
            left: 50%;
            transform: translateX(-50%);
            top: auto;
            bottom: -11px;
        }
    }


    /* --- Static title */
    .protector-title {
        display: none;
        color: var(--textcolor-accent);
        margin-bottom: 10px;
        text-transform: uppercase;
        font-weight: 700;
        letter-spacing: 0.5px;
    }

    &.item-active .protector-title {
        display: block;
    }


    /* --- Buttons */
    /* Cancel button */
    .protector-failsafe {
        display: none !important;
        margin-bottom: 10px;
    }

    &.item-active .protector-failsafe {
        display: block !important;
    }

    /* Protected button */
    .protector-risky {
        display: block;
    }
}


/* !-------------------------------------------- */
/* !COMPONENT: Flyouts */
/* !-------------------------------------------- */

/* --- Container layout & visibility */
.tt-eins .substance-flyout {
    position: relative;

    > .flyout-host {
        position: absolute;
        bottom: 0;
        display: none;
        z-index: 60;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Standard alignment of flyout panel */
    .flyout-host {
        bottom: auto;
        top: 100%;
        margin-top: 8px;
        left: 50%;
        transform: translateX(-50%);
    }
    
    /* Alignment matching parent width */
    &.flyout-compact .flyout-host {
        left: 0;
        right: 0;
        margin-top: 0;
        transform: none;
    }
    
    /* Make visible when active */
    &.flyout-active > .flyout-host {
        display: block;
    }
    
    &.flyout-active > .flyout-host.host-sidebar {
        display: grid;
    }
}


/* --- Triangle connector for active flyout (on the initiating container) */
.tt-eins .substance-flyout.flyout-active:before {
    content: "";
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
    background: #fff;
    bottom: -16px;
    left: 50%;
    margin-left: -8px;
    z-index: 100;
    transform: rotateZ(45deg);
    border-left: var(--line-flyouthost);
    border-top: var(--line-flyouthost);
}

.tt-eins .substance-flyout.flyout-compact.flyout-active:before {
    display: none;
}


/* --- Flyout content container */
.tt-eins .flyout-host {
    text-align: left;
    background: #fff;
    padding: 15px 0 15px 0;
    width: var(--flyout-width-minimum);
    border: var(--line-flyouthost);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-flyout);
    transition: var(--transition-width);
    
    /* Size variants: these guidelines can be adjusted by #actor rules */
    &.host-size-medium {
        width: var(--flyout-width-medium);
        max-width: none;
    }
    
    &.host-size-maxi {
        width: var(--flyout-width-maxi);
        max-width: none;
    }
    
    &.host-size-mega {
        width: var(--flyout-width-mega);
        max-width: none;
    }
    
    /* Layout variant: flyouts with 2 columns */
    &:not(.host-sidebar) .sidebar-container {
        display: none;
    }
    
    &.host-sidebar {
        width: calc(var(--flyout-width-maxi) + var(--flyout-sidebar-width));
        grid-template-columns: var(--flyout-sidebar-width) auto;
    }
    
    &.host-sidebar .sidebar-container {
        grid-column: 1;
        grid-row: 1;
    }
    
    &.host-sidebar > *:not(.sidebar-container) {
        grid-column: 2;
        grid-row: 1;
    }
}

/* Special case: Combobox flyout for <input> fields */
.tt-eins .substance-flyout.flyout-compact {
    .flyout-host {
        max-height: 40vh;
        padding: 10px 0 10px 0;
        border-radius: 0 0 var(--radius-panel) var(--radius-panel);
        width: 100%;
        max-width: 100%;
        overflow: auto;
        border-top-color: transparent;
        box-shadow: var(--shadow-flyout-compact);
    }

    &.flyout-active .field-container input {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
}


/* !-------------------------------------------- */
/* !COMPONENT: Menu-like flyouts */
/* !-------------------------------------------- */

.tt-eins .flyout-host.substance-menu {
    padding-top: 5px;
}


/* --- Groups of menu options */
.tt-eins .substance-menu .menu-section {
    padding: 10px 15px 10px 15px;
}

.tt-eins .substance-menu .menu-info + .menu-section, 
.tt-eins .substance-menu .menu-info + .menu-info, 
.tt-eins .substance-menu .menu-section + .menu-section, 
.tt-eins .substance-menu .menu-section + .menu-info {
    border-top: var(--line-standard-thick);
}

.tt-eins .substance-menu .menu-info:first-child, 
.tt-eins .substance-menu .menu-section.section-interactive:first-child {
    margin-top: 10px;
}

.tt-eins .flyout-host .substance-menu *:first-child {
    margin-top: 0;
}

/* Interactive menu sections */
.tt-eins .substance-menu * + .menu-section.section-interactive {
    margin-top: 20px;
    position: relative;
}

.tt-eins .substance-menu *:not(.menu-section.section-interactive) + .menu-section.section-interactive:before {
    content: "";
    position: absolute;
    top: -20px;
    left: -10px;
    right: -10px;
    height: 2px;
    background: var(--linecolor-standard);
}

.tt-eins .substance-menu .menu-section.section-interactive + .menu-section {
    margin-top: 20px;
}

/* Last menu sections */
.tt-eins .substance-menu .menu-section:last-of-type {
    padding-bottom: 0;
    margin-bottom: 0;
}

.tt-eins .substance-menu .menu-info:last-of-type {
    margin-bottom: 0;
}

/* Edge case: multiple option groups within one section */
.tt-eins .substance-menu .menu-section ul + ul {
    margin-top: 20px;
}

/* Edge case: messages within menus */
.tt-eins .substance-menu .menu-section .substance-message {
    margin-bottom: 20px;
}

/* Edge case: controllers within sections */
.tt-eins .substance-menu .menu-section .section-controller {
    margin-bottom: 20px;
}

/* Optional group title */
.tt-eins .substance-menu .section-title {
    color: var(--textcolor-accent);
    margin-bottom: 10px;
    margin-top: 5px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    
    .substance-id .id-suffix.suffix-point {
        color: var(--textcolor-standard);
    }
}

.tt-eins .substance-menu .menu-section:first-child .section-title {
    margin-top: 0;
}

/* Expandable menu sections */
.tt-eins .substance-menu .menu-section.section-expandable {
    &:not(.item-active) .expand-action {
        margin-bottom: 0;
    }
    
    &:not(.item-active) ul, 
    &:not(.item-active) .substance-table, 
    &:not(.item-active) .substance-segmenter {
        display: none;
    }
}

/* Menu sections with tables */
.tt-eins .substance-menu .menu-section .substance-table {
    margin-top: 15px;

    td:has(.substance-file) {
        width: 50px;
        padding-left: 0;
        padding-right: 0;
    }
}

/* Menu sections with columns (of molecules) */
.tt-eins .substance-menu .menu-section.section-columns {
    ul {
        -moz-column-count: 3;
             column-count: 3;
        -moz-column-gap: 20px;
             column-gap: 20px;
    }
    
    ul.columns-wide {
        -moz-column-count: 1;
             column-count: 1;
    }
    
    .molecule {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        page-break-inside: avoid;
        -moz-column-break-inside: avoid;
             break-inside: avoid;
        display: inline-block;
        width: 100%;
    }
}


/* --- Single menu option */
.tt-eins .substance-menu .molecule {
    margin-left: -15px;
    margin-right: -15px;
    padding: 0 15px 0 15px;
    transition: var(--transition-color);
    
    &.field-entry:not(:last-child) {
        margin-bottom: var(--field-entry-margin);
    }
    
    &.section-action:last-child {
        margin-bottom: 0;
    }
    
    /* Edge case: in filter flyouts, we have a reset button before additional filter entries */
    &.section-action:has(~ .molecule.field-entry) {
        margin-bottom: 20px;
    }
    
    /* Entry highlighting by background color */
    @media (hover: hover) {
        &:not(.field-entry):not(.section-action):not(.entry-info):hover {
            background-color: var(--backcolor-standard);
            transition: var(--transition-color);
        }
    }
    
    /* Permanent highlight marker */
    &.item-active {
        background-color: var(--backcolor-standard);
        border-left: var(--line-active);
        padding-left: 7px;
        font-weight: 700;
        transition: var(--transition-color);
    }
    
    /* Actual action items inside menu options */
    .link-action {
        display: block;
        color: #000;
        width: 100%;
        padding-top: 7px;
        padding-bottom: 7px;
    }
    
    .link-action .substance-entity {
        color: #000;
    }
    
    &:first-child .link-action, 
    &:not(.field-entry):first-child .link-action {
        margin-top: 0;
    }
    
    /* Menu entries holding only ID numbers */
    .link-action:has(> .substance-id) {
        color: inherit;
        padding-top: 0;
        padding-bottom: 0;
    }
    
    &:not(:last-child) .link-action:has(> .substance-id) {
        margin-bottom: 7px;
    }
    
    /* Disabled menu options (rare case) */
    /* This should be handled generically in substances_small.css but it's risky due to Creator leaks */
    .link-action[disabled] {
        opacity: 0.5;
        cursor: not-allowed;
    }
    
    /* Menu entries holding counter chips */
    &:has(.substance-counter) > .link-action {
        display: flex;
        align-items: center;
        -moz-column-gap: 10px;
             column-gap: 10px;
    }
    
    &:has(.substance-counter) span {
        flex-grow: 1;
    }
    
    .substance-counter {
        order: 1;
    }
    
    .substance-counter.counter-zero {
        display: inline-block;
        border-color: var(--linecolor-light);
        color: var(--textcolor-dimmed);
    }
    
    /* Menu action buttons */
    &.section-action:not(:has(.action-comment)) {
        display: flex;
        justify-content: space-between;
    }
    
    &.section-action .action-comment {
        margin-top: 5px;
        color: var(--textcolor-standard);
        -webkit-hyphens: auto;
        hyphens: auto;
    }
    
    /* Menu options with form elements which spawn their own value flyout */
    &.field-entry.substance-flyout .flyout-host {
        left: 15px;
        right: 15px;
        width: calc(100% - 30px);
        min-width: 0;
    }
    
    /* Menu options with checkbox/radio elements */
    &.entry-checkbox label, 
    &.entry-radio label {
        -webkit-hyphens: auto;
        hyphens: auto;
        /* We can have unwieldy strings here */
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    /* TEMPORARY: incident entities */
    .substance-entity.entity-incident + p {
        color: var(--textcolor-standard);
        padding-left: 24px;
        margin-top: 5px;
    }
}


/* --- Highly interactive sections */
.tt-eins .substance-menu .menu-section.section-interactive {
    border: var(--line-standard);
    margin-left: 10px;
    margin-right: 10px;
    padding: 10px 10px 0 10px;
    border-radius: var(--radius-panel);

    .section-title {
        background: var(--backcolor-standard);
        padding: 10px;
        margin: -10px -10px 15px -10px;
    }
    
    /* Decisive exit action/submit button for interactive section*/
    .section-action {
        margin-top: 15px;
        margin-left: -15px;
        margin-right: -15px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    
    .section-action:first-child, 
    .section-action:first-child + .section-action {
        margin-top: 0;
    }
    
    .section-action:first-child {
        padding-top: 0;
    }
}


/* --- Static information blocks */
.tt-eins .substance-menu .menu-info {
    background: var(--backcolor-standard);
    color: var(--textcolor-standard);
    padding: 10px 15px 10px 15px;

    &:last-child {
        border-radius: 0 0 var(--radius-panel) var(--radius-panel); /* corresponds with radius of parent .flyout-host */
    }
    
    .section-title {
        margin-top: 0;
    }
    
    /* Abstract content elements */
    > p, 
    .substance-timestamp, 
    .substance-richtext {
        margin-bottom: 10px;
    }
    
    *:last-child {
        margin-bottom: 0;
    }
    
    &:last-child {
        border: none;
    }
    
    .substance-message {
        padding-left: 0;
        padding-right: 0;
    }

    /* Key value pairs */
    .block-property .property-item {
        margin: 0 -10px 10px -10px;
        padding: 0 10px 10px 10px;
        border-bottom: 1px solid #fff;
    }
    
    .block-property .property-item:last-child {
        padding-bottom: 0;
        margin-bottom: 0;
        border-bottom: none;
    }
    
    .block-property .property-item .property-title {
        font-weight: 600;
    }
    
    .block-property .property-item .property-value {
    }
}

/* Key value pairs in columns */
.tt-eins .substance-menu .menu-info.info-columns {
    .block-property {
        display: table;
        border-collapse: collapse;
    }
    
    .block-property .property-item {
        display: table-row;
        margin: 0;
        padding: 0;
    }
    
    .block-property .property-title {
        display: table-cell;
        padding: 10px 20px 10px 0;
        vertical-align: top;
    }
    
    .block-property .property-value {
        display: table-cell;
        padding: 10px 0 10px 0;
        vertical-align: top;
    }
    
    .block-property .property-item:last-child .property-title, 
    .block-property .property-item:last-child .property-value {
        padding-bottom: 0;
    }
}


/* !-------------------------------------------- */
/* !COMPONENT: vCards */
/* !-------------------------------------------- */

.tt-eins .substance-vcard {
    position: relative;
    padding-left: 50px;
    min-height: 30px;


    /* --- Icon */
    &:before {
        content: "";
        display: block;
        position: absolute;
        top: -5px;
        left: 0;
        width: 36px;
        height: 36px;
        background: transparent url(../../static/media/icon_user.6e005dc7e7c30ea1cf19.svg) center 0 no-repeat;
        background-size: 36px;
    }

    &.vcard-level-1:before {
        background-image: url(../../static/media/icon_user_level1.6b5baf6054b2a22676a1.svg);
    }

    &.vcard-level-2:before {
        background-image: url(../../static/media/icon_user_level2.54d020e5d511d1238a76.svg);
    }

    &.vcard-level-3:before {
        background-image: url(../../static/media/icon_user_level3.a9a2a1ceebc7b3d48d07.svg);
    }


    /* --- Essential properties */
    p:first-child {
        margin-top: 8px;
        font-weight: 600;
        margin-bottom: 0;
    }

    .vcard-name {
    }

    .vcard-role {
    }

    /* --- Communication properties */
    .vcard-email {
        margin-top: 10px;
    }

    .vcard-phone {
        font-weight: 500;
        margin-top: 5px;
    }
}


/* !-------------------------------------------- */
/* !COMPONENT: Text fragment picker */
/* !-------------------------------------------- */

/* --- Grand container */
.tt-eins .substance-textpicker {
    padding-left: 10px;
    padding-right: 10px;
}


/* --- Switcher for different text pools */
.tt-eins .substance-textpicker .substance-segmenter {
    height: 100%;
}

.tt-eins .substance-textpicker .substance-segmenter .substance-tab-bar {
    margin-bottom: 0;
}


/* --- Search feature */
.tt-eins .substance-textpicker .substance-segmenter .segment-all ul {
    margin: 10px;
}


/* --- Innermost list of text fragment pickers */
/* Sub-headlines between multiple lists */
.tt-eins .substance-textpicker .textpicker-listhead {
    margin: 15px 10px 0 10px;
    color: var(--textcolor-standard);
    font-weight: 700;
}

.tt-eins .substance-textpicker .textpicker-listhead:first-child {
    margin-top: 0;
}

/* Single fragment entry */
.tt-eins .substance-textpicker .textpicker-list .list-item {
    display: flex;
    -moz-column-gap: 10px;
         column-gap: 10px;
    align-items: center;
    padding: 0 10px 0 10px;
    min-height: 42px; /* 2 lines of text */
}   

/* Single fragment entry: Paste action */
.tt-eins .substance-textpicker .textpicker-list .list-item .link-action {
    padding: 5px 0 5px 0;
    flex-grow: 1;
}

@media (hover: hover) {
    .tt-eins .substance-textpicker .textpicker-list .list-item .link-action:hover {
        cursor: copy;
    }
    
    .tt-eins .substance-textpicker .textpicker-list .list-item:has(.link-action:hover) {
        background-color: var(--backcolor-standard);
    }
}

/* Single fragment entry: Preview action */
.tt-eins .substance-textpicker .textpicker-list .list-item .primary-action.action-view {
    flex-shrink: 0;
}


/* !-------------------------------------------- */
/* !COMPONENT: Vertical accordion */
/* !-------------------------------------------- */

/* !--- Single, expandable accordion block */
.tt-eins .substance-accordion > .accordion-block {
    &:not(:last-child) {
        border-bottom: 1px solid var(--linecolor-standard);
    }

    &.item-active {
        border-bottom: var(--line-signature);
    }
}

/* Nested accordion blocks */
.tt-eins .substance-accordion .substance-accordion .accordion-block {
    margin-left: 10px;
    margin-right: 10px;
    
    &:not(:last-child) {
        border-bottom: 1px solid var(--linecolor-medium);
    }
    
    &.item-active {
        border-bottom: none;
    }
}


/* !--- Block head */
.tt-eins .substance-accordion .accordion-block .block-head {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 10px 10px 10px 10px;
    
    .head-controller {
        flex-grow: 1;
        position: relative;
        display: flex;
        align-content: center;
    }
    
    /* Controller button */
    .head-controller .accordion-controller {
        flex-grow: 1;
    }
    
    .head-controller .accordion-controller.expand-action:not(.item-active):before {
        transform: rotateZ(90deg); /* DEPRECATED: remove when TB-1299 is done */
    }
    
    .head-controller .accordion-controller.expand-action.item-active:before {
        transform: rotateZ(180deg); /* DEPRECATED: remove when TB-1299 is done */
    }

    /* Additional block states */
    .head-controller .head-state {
    }
}

/* Nested block heads */
.tt-eins .substance-accordion .substance-accordion .accordion-block .block-head {
    padding-left: 0;
    padding-right: 0;
}

.tt-eins .substance-accordion .substance-accordion .accordion-block .block-head .accordion-controller {
    font-weight: 700;
}


/* !--- Controlled expander container */
.tt-eins .substance-accordion .accordion-block {
    > .block-content {
        display: none;
    }

    &.item-active > .block-content {
        display: block;
        margin-bottom: 10px;
    }
}

.tt-eins .substance-accordion .substance-accordion .accordion-block.item-active > .block-content {
    margin-left: -10px;
    margin-right: -10px;
}


/* !-------------------------------------------- */
/* !COMPONENT: Tooltip */
/* !-------------------------------------------- */

/* !--- Hosting container */
.tt-eins .substance-tooltip {
    position: relative;
}


/* !--- Tooltip-triggering button */
@media (hover: hover) {
    .tt-eins .substance-tooltip .tooltip-controller:hover {
        cursor: help;
    }
}


/* !--- Tooltip content */
.tt-eins .substance-tooltip .tooltip-container {
    display: none;
    width: var(--flyout-width-medium);
    position: absolute;
    top: -4px;
    left: calc(100% + 10px);
    background: #fff;
    padding: 10px;
    border: var(--line-tooltip);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-flyout);
    z-index: 10;
}

/* Arrow connector */
.tt-eins .substance-tooltip .tooltip-container:before {
    content: "";
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
    background: #fff;
    top: 16px;
    left: 0;
    margin-left: -8px;
    z-index: 100;
    transform: rotateZ(-45deg);
    border-left: var(--line-tooltip);
    border-top: var(--line-tooltip);
}

/* Invocation conditions: differentiate between :hover-capable devices and touchscreens */
.tt-eins .substance-tooltip:has(:is(.tooltip-controller:hover, .tooltip-controller:focus)) .tooltip-container {
    display: block;
}

@media (hover: none) {
    .tt-eins .substance-tooltip:has(:is(.tooltip-controller:active, .tooltip-controller:focus)) .tooltip-container {
        display: block;
    }
}


/* !-------------------------------------------- */
/* !COMPONENT: Toolchains */
/* !-------------------------------------------- */

.tt-eins .substance-toolchain {
    /* --- Major containers */
    display: flex;
    -moz-column-gap: 8px;
         column-gap: 8px;
    align-items: center;

    .toolchain-link > .primary-action {
        display: block;
    }


    /* --- Specialized toolchain for reordering */
    &.toolchain-index {
        -moz-column-gap: 0;
             column-gap: 0;

        .toolchain-link:first-child .primary-action {
            /* Killing borders for buttons */
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        .toolchain-link:last-child .primary-action {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

        /* Index number */
        .link-index {
            border-top: 1px solid var(--actioncolor-shade-medium);
            border-bottom: 1px solid var(--actioncolor-shade-medium);
            background: #fff;
        }
        
        .link-index .substance-id {
            padding: 4px 10px 4px 10px;
            vertical-align: middle;
            line-height: 20px;
            min-width: 3.5em;
            text-align: center;
        }

        .link-index p {
            padding: 5px 10px 4px 10px;
            vertical-align: middle;
            font-weight: 500;
            line-height: 20px;
            min-width: 3.5em;
            text-align: center;
        }
    }
}


/* !-------------------------------------------- */
/* !COMPONENT: Tab bars */
/* !-------------------------------------------- */

/* --- Outer container */
.tt-eins .substance-tab-bar {
    position: relative;
    margin-bottom: 20px;
    
    --tab-back-overshoot: 20px;
    --tab-bordercolor: var(--linecolor-active);
    --tab-countercolor: var(--linecolor-dark);
    
    &.tab-embedded {
        background-color: var(--backcolor-medium);
        padding: 6px;
        z-index: 1; /* set context for z-index: -1 */
        margin-bottom: 10px;
        
        --tab-bordercolor: var(--linecolor-medium);
        --tab-back-overshoot: 0px;
    }
    
    /* Endless background stripe for tab bar */
    &:after {
        content: "";
        display: block;
        position: absolute;
        left: 50%;
        width: 100vw;
        margin-left: -50vw;
        bottom: -2px;
        height: calc(100% + var(--tab-back-overshoot));
        border-bottom: 2px solid var(--tab-bordercolor);
        background-image: var(--gradient-tab-bar);
        z-index: -1;
    }
    
    &.tab-embedded:after {
        display: none;
    }
    
    /* Row of tab containers */
    .tab-list {
        display: flex;
        max-width: 100%;
    }
}


/* --- Single tab container */
.tt-eins .substance-tab-bar .tab {
    min-width: 0;
    position: relative;
    border-radius: var(--radius-interaction) var(--radius-interaction) 0 0;
    border: 1px solid transparent;
    border-bottom: none;
    transition: var(--transition-color);
    
    /* Vertical divider line between unselected tabs */
    &:not(:last-child):after {
        content: "";
        position: absolute;
        bottom: 0;
        right: -2px;
        height: calc(100% + var(--tab-back-overshoot));
        width: 1px;
        background: #fff;
    }
    
    /* Active state */
    &.item-active {
        background: var(--gradient-nav-main);
        border-color: var(--tab-bordercolor);
        transition: var(--transition-color);
    }
    
    /* Interaction states */
    @media (hover: hover) {
        &:hover {
            border-color: var(--tab-bordercolor);
            transition: var(--transition-color);
        }
        
        &.item-active:hover .menu-action {
            background: var(--transity-sand-70-x);
        }
    }
}

/* Embedded tab bars: segmented control */
.tt-eins .substance-tab-bar.tab-embedded .tab {
    border-radius: var(--radius-interaction);
    border: 1px solid var(--tab-bordercolor);
    
    /* Divider lines */
    &:not(:last-child):after {
        display: none;
    }
    
    &:not(:last-child) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    &:not(:first-child) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-left: none;
    }
    
    /* Interaction states */
    @media (hover: hover) {
        &:not(.item-active):hover .menu-action {
            background-color: #fff;
        }
    }
}


/* --- Single tab container: content */
.tt-eins .substance-tab-bar {
    /* Button inside tab */
    .menu-action {
        max-width: 100%;
        padding: 11px 20px 10px 20px;
        color: #000;
        height: var(--button-height);
        transition: var(--transition-color);
    }

    .tab:not(.item-active) .menu-action:focus-visible {
        outline: var(--focus-outline-standard);
    }
        
    .tab.item-active .menu-action {
        color: #fff;
        font-weight: 800;
        transition: var(--transition-color);
    }
    
    /* Buttons inside embedded tab bar */
    &.tab-embedded .menu-action {
        font: var(--textset-plus-s);
        font-weight: 400;
        padding: 1px 10px 0 10px;
        height: var(--button-height-mini);
        border-radius: var(--radius-interaction);
    }
    
    &.tab-embedded .tab:not(:last-child) .menu-action {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    
    &.tab-embedded .tab:not(:first-child) .menu-action {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
    
    /* Counter inside tab */
    .menu-action .substance-counter {
        position: relative;
        top: -1px;
        margin-left: 5px;
        font: var(--textset-s);
        font-weight: 800;
        line-height: 13px;
        letter-spacing: 0;
        color: var(--tab-countercolor);
        border-color: var(--tab-countercolor);
        background-color: transparent;
    }
    
    &.tab-embedded .menu-action .substance-counter {
        margin-left: 3px;
    }
    
    .tab.item-active .menu-action .substance-counter {
        --tab-countercolor: #fff;
    }
}


/* !-------------------------------------------- */
/* !COMPONENT: Tab-controlled segments */
/* !-------------------------------------------- */

/* Placement as top element in flyout needs click blocker to prevent flyout collapse */
.tt-eins .substance-menu > .substance-segmenter {
    margin: 10px 15px 10px 15px;
    position: relative;
}

.tt-eins .substance-menu > .substance-segmenter:before {
    content: "";
    position: absolute;
    display: block;
    top: -10px;
    right: -15px;
    bottom: -10px;
    left: -15px;
    z-index: -1;
}

/* Grand container */
.tt-eins .substance-segmenter {
    border: 2px solid var(--linecolor-standard);
    border-radius: var(--field-radius);
    
    
    /* --- Tab controller */
    .substance-tab-bar {
        background-color: var(--backcolor-standard);
    }
    
    
    /* --- Segments */
    .segmenter-section:not(.item-active) {
        display: none;
    }
    
    
    /* --- Menu sections */
    .segmenter-section .menu-section:last-child {
        margin-bottom: 10px;
    }
    
    
    /* --- Variant: File tables */
    &.segmenter-files .segmenter-section .substance-table tr:first-child {
        border-top: none;
    }
    
    &.segmenter-files .segmenter-section .substance-table tr:first-child td {
        padding-top: 6px;
    }
    
    &.segmenter-files .segmenter-section .substance-table td:first-child {
        padding-right: 0;
    }
    
    &.segmenter-files .segmenter-section .substance-table td:last-child {
        width: 1%;
    }
    
    &.segmenter-files .segmenter-section .substance-entity.entity-attachment {
        width: auto;
    }
    
    
    /* --- Variant: Custom uploader */
    &.segmenter-files .segmenter-section.segment-upload {
        padding: 0 6px 6px 6px;
    }
    
    /* List of uploaded files */
    &.segmenter-files .segmenter-section.segment-upload .substance-table {
        margin-bottom: 10px;
    }
    
    /* Flyout to upload more files */
    &.segmenter-files .segmenter-section.segment-upload .substance-flyout.flyout-active:before {
        bottom: auto;
        top: -16px;
        transform: rotateZ(-135deg);
    }
    
    &.segmenter-files .segmenter-section.segment-upload .substance-flyout .flyout-controller {
        margin: 0 auto 0 auto;
        display: block;
    }
    
    &.segmenter-files .segmenter-section.segment-upload .substance-flyout .flyout-host {
        top: auto;
        bottom: 100%;
        margin-top: 0;
        margin-bottom: 8px;
    }
}


/* !-------------------------------------------- */
/* !COMPONENT: Filter bar */
/* !-------------------------------------------- */

/* --- Containers */
/* Bar container */
.tt-eins .substance-filter {
    margin-bottom: 30px;

    > ul {
        display: flex;
        flex-wrap: wrap;
        -moz-column-gap: 20px;
             column-gap: 20px;
        row-gap: 7px;
    }
    
    /* Criterion container */
    .filter-criterion {
        background: #fff;
        height: 100%;
    }
}


/* --- Description & current filter value */
.tt-eins .substance-filter .filter-criterion {
    .criterion-descript {
        padding: 10px 0 8px 0;
        border-bottom: 1px solid var(--linecolor-light);
        transition: var(--transition-color);
    }
    
    &.item-active .criterion-descript {
        border-bottom-width: 6px;
    }
    
    /* Interaction states */
    @media (hover: hover) {
        .criterion-descript:has(.view-action:not([disabled]):hover) {
            border-bottom-color: var(--linecolor-medium);
            transition: var(--transition-color);
        }
    }
    
    .criterion-descript .view-action:focus-visible {
        outline-offset: 5px;
    }

    /* Filter controller: Filter title with type icons */
    .criterion-title {
        display: block;
        font: var(--textset-plus-s);
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--textcolor-accent);
        margin-bottom: 3px;
    }
    
    .criterion-title:before {
        content: "";
        display: inline-block;
        width: 10px;
        height: 12px;
        margin-right: 5px;
        vertical-align: baseline;
        background: transparent url(../../static/media/iconsprite_filter_types.4fb6418bb16a23a2c670.svg) left -64px no-repeat;
    }
    
    &.criterion-type-range .criterion-title:before {
        background-position: left -58px;
    }
    
    &.criterion-type-radio .criterion-title:before {
        background-position: left 2px;
    }
    
    &.criterion-type-checkbox .criterion-title:before {
        background-position: left -18px;
    }
    
    &.criterion-type-simple .criterion-title:before, 
    &.criterion-type-search .criterion-title:before {
        background-position: left -38px;
    }
    
    &:has(.flyout-controller[disabled]) .criterion-title:before {
        background-position: left -78px;
    }
    
    &.item-active .criterion-title {
        letter-spacing: 0.08em;
        font-weight: 700;
    }
    
    /* Filter controller: current filter value */
    .criterion-value {
        display: block;
        font-weight: 400;
        width: 100%;
        padding-right: 18px; /* space for flyout icon */
        min-width: calc(4ch + 18px); /* Set to German default value "Alle" */
        max-width: 20dvw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    &.item-active .criterion-value {
        font-weight: 700;
    }
    
    .view-action[disabled] .criterion-value {
        color: var(--textcolor-standard);
        padding-right: 0;
    }
    
    /* Filter controller: arrow */
    .flyout-controller {
        padding-right: 0;
    }
    
    .flyout-controller:after {
        top: 100%;
        margin-top: -15px;
    }
    
    .flyout-controller[disabled]:after {
        display: none;
    }
}


/* --- Filter flyout */
.tt-eins .substance-filter .filter-criterion {
    .flyout-host {
        left: 0;
        margin-top: 10px;
        transform: none;
    }
    
    .substance-flyout.flyout-active:before {
        bottom: -18px;
        left: 25px;
    }
    
    /* Change alignment for the rightmost element if we have at least 5 filters */
    &.criterion-rightmost:nth-child(n+5) .flyout-host {
        left: auto;
        right: 0;
    }
    
    /* Filter flyout content */
    .substance-menu .molecule.entry-info {
        margin-top: 20px;
    }
    
    .substance-menu .molecule:not(.entry-info):not(.field-entry):not(.section-action) {
        margin-top: 20px;
    }
}


/* !-------------------------------------------- */
/* !COMPONENT: Atomic editors */
/* !-------------------------------------------- */

/* --- Outer container */
.tt-eins .substance-editor {
    display: inline-block;
    position: relative;
    border: 1px solid transparent;
    border-radius: var(--field-radius);
    transition: var(--transition-color);

    &.item-active {
        display: block;
        padding-right: 0;
        box-shadow: var(--shadow-editor);
        z-index: 100;
        min-width: 120px;
        border: none;
    }
}

/* Interaction states */
@media (hover: hover) {
    .tt-eins .substance-editor.editor-mutable:not(.item-active):hover {
        cursor: pointer;
        background-color: var(--field-backcolor-hover);
        border: 1px solid var(--field-bordercolor-hover);
        transition: var(--transition-color);
    }
    
    .tt-eins .substance-editor.item-active:hover {
        cursor: inherit;
    }
}


/* --- Write indicator (for non-boolean values) */
/* Make room for editing icon/button */
.tt-eins .substance-editor:not(.item-active).editor-mutable {
    padding-right: 20px;
}

/* Legacy: Set writable icon */
.tt-eins .substance-editor.editor-mutable:not(:has(.editor-entry)) {
    &:after {
        content: "";
        display: block;
        position: absolute;
        right: 3px;
        top: 5px;
        width: 14px;
        height: 14px;
        background: transparent url(../../static/media/icon_action_edit.0ec95054b657c42de6b7.svg) center 0 no-repeat;
    }
    
    &:has(.editor-value > .link-action > .substance-id:only-child):after {
        top: 8px;
    }
    
    &.item-active:after {
        display: none;
    }
}

/* Accessible: button to trigger editing mode */
.tt-eins .substance-editor:not(.item-active).editor-mutable .editor-entry {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}

.tt-eins .substance-editor.item-active .editor-entry {
    display: none;
}

.tt-eins .substance-editor.editor-mutable .editor-entry .primary-action {
    border: none;
    background: transparent;
    height: 100%;
    width: 100%;
}

.tt-eins .substance-editor.editor-mutable .editor-entry .primary-action:before {
    left: auto;
    transform: translateY(-50%);
    right: 1px;
}


/* --- Boolean toggle switch */
.tt-eins .substance-editor.editor-type-boolean {
    /* Configure abstract, sized & invisible frame */
    &.editor-mutable {
        padding: 0;
        height: 22px;
        width: 40px;
    }
    
    &.editor-mutable:after {
        display: none;
    }
    
    /* Interaction states */
    @media (hover: hover) {
        &.editor-mutable:hover {
            background: transparent;
            border-color: transparent;
        }
    }
    
    &.editor-mutable:has(:focus-visible) {
        outline: var(--focus-outline-standard);
        outline-offset: 2px;
    }
    
    /* Container */
    .editor-form, 
    .editor-form .field-container {
        display: block;
        width: 100%;
        height: 100%;
    }
    
    /* Hidden checkbox */
    input {
        position: absolute;
        z-index: 2;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        opacity: 0.00001;
        cursor: pointer;
    }
    
    /* Rail frame */
    label {
        display: block;
        width: 100%;
        height: 100%;
        overflow: hidden;
        text-indent: -1000em;
        border-radius: var(--option-radius);
        border: 1px solid var(--option-bordercolor-medium);
        outline: 2px solid #fff; /* for colored backgrounds */
        background-color: var(--option-backcolor);
        transition: var(--transition-universal);
    }
    
    @media (hover: hover) {
        &:hover label {
            border-color: var(--option-bordercolor-hover);
            background-color: var(--option-backcolor-hover);
            transition: var(--transition-universal);
        }
    }
    
    /* Moveable slider */
    label:after {
        content: "";
        display: block;
        position: absolute;
        top: 3px;
        left: 3px;
        width: 14px;
        height: 14px;
        border-radius: 2px;
        border: 1px solid var(--option-bordercolor);
        background-color: #fff;
        transition: var(--transition-universal);
    }
    
    input:checked ~ label:after {
        background: var(--option-backcolor-checked) center url(../../static/media/icon_action_save_white.6a5411904ecbbae45ca3.svg) no-repeat;
        background-size: 82%;
        left: 21px;
        transition: var(--transition-universal);
    }
}


/* --- Show current value in idle state */
.tt-eins .substance-editor.item-active .editor-value {
    display: none;
}

.tt-eins .substance-editor.editor-mutable .editor-value {
    font: var(--textset-m);
    padding: 5px 4px 4px 4px;
    min-height: 26px;
    min-width: 31px; /* width of .substance-placeholder */

    .link-action {
        position: relative;
        z-index: 1;
    }
    
    &.substance-richtext {
        word-break: break-word; /* Protection against adversary strings */
    }
}

/* Interaction states */
@media (hover: hover) {
    .tt-eins .substance-editor.editor-mutable:not(.item-active):hover .editor-value, 
    .tt-eins .substance-editor.editor-mutable:not(.item-active):hover .editor-value * {
        color: var(--field-textcolor-focus);
    }
}


/* --- Form elements */
.tt-eins .substance-editor .editor-form {
    display: none;
}

.tt-eins .substance-editor.item-active .editor-form {
    display: block;
}


/* --- Editor exit actions */
.tt-eins .substance-editor .editor-actions {
    display: none;
}

.tt-eins .substance-editor.item-active .editor-actions {
    display: flex;
    position: absolute;
    right: 0;
    bottom: -34px;
    
    .toolchain-link .primary-action {
        width: 50px;
        box-shadow: var(--shadow-editor-button);
    }
    
    .primary-action:before {
        width: 50px;
        height: 100%;
    }
}


/* !-------------------------------------------- */
/* !COMPONENT: Richtext editors (TinyMCE instances) */
/* !Overriding built-in skin.css */
/* !-------------------------------------------- */

/* --- Outer TMCE container */
.tt-eins .substance-richtext-editor .tox-tinymce {
    border: 1px solid var(--linecolor-light);
    font-family: "Aileron", "Helvetica", "Arial", sans-serif;
    border-radius: var(--field-radius);
}

/* --- TMCE toolbar */
/* Vertical divider lines between tool segments */
.tt-eins .substance-richtext-editor .tox:not([dir=rtl]) .tox-toolbar__group:not(:last-of-type) {
    border-color: var(--linecolor-standard);
}

/* Toolbar pseudo selects */
.tt-eins .substance-richtext-editor .tox .tox-tbtn {
    color: var(--actioncolor);
}

/* Menu flyouts (hooked up elsewhere in the DOM) */
.tt-eins .stage .tox .tox-collection--list .tox-collection__item--active:not(.tox-collection__item--state-disabled) {
    color: var(--actioncolor);
}

.tt-eins .stage .tox .tox-collection--list .tox-collection__item--active {
    background-color: var(--button-back-simple);
}

/* Toolbar icons */
.tt-eins .substance-richtext-editor .tox .tox-tbtn svg {
    fill: var(--actioncolor);
}

.tt-eins .substance-richtext-editor .tox .tox-tbtn--disabled svg {
    opacity: 0.5;
}

.tt-eins .substance-richtext-editor .tox .tox-tbtn:active {
    background-color: var(--button-back-simple);
}

@media (hover: hover) {
    .tt-eins .substance-richtext-editor .tox .tox-tbtn:hover {
        background-color: var(--button-back-simple);
    }
}

/* Horizontal divider line to textarea */
.tt-eins .substance-richtext-editor .tox-tinymce .tox-editor-container .tox-toolbar__primary {
    background: url("data:image/svg+xml;charset=utf8,%3Csvg height=%2739px%27 viewBox=%270 0 40 39px%27 width=%2740%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Crect x=%270%27 y=%2738px%27 width=%27100%27 height=%271%27 fill=%27%23f0ede8%27/%3E%3C/svg%3E") left 0 top 0 #fff;
}

/* --- TMCE status bar */
.tt-eins .substance-richtext-editor .tox-tinymce .tox-statusbar {
    border-top: var(--line-standard);
}

.tt-eins .substance-richtext-editor .tox .tox-statusbar__path-item {
    color: var(--textcolor-standard);
}

/* !-------------------------------------------- */
/* !COMPONENT: Entities --- Abstract container */
/* !-------------------------------------------- */

.tt-eins .substance-entity {
    /* --- Basic container */
    display: inline-block;
    padding-left: 15px;
    position: relative;
    color: var(--textcolor-standard);

    &.entity-inverse,
    &.entity-inverse p {
        color: #fff;
        font-weight: 700;
    }
    
    /* Entity icon */
    &:before {
        content: "☺︎";
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        text-indent: 0;
        background: transparent center 0 no-repeat;
    }
    
    /* Icon only variant */
    &.entity-icon {
        overflow: hidden;
        width: 22px;
        padding-left: 0;
        text-indent: -1000em;
        
        @media (hover: hover) {
            cursor: help;
        }
    }
}

/* !-------------------------------------------- */
/* !COMPONENT: Entities --- Comment markers (used in Penalty) */
/* !-------------------------------------------- */

.tt-eins .substance-entity.entity-comment {
    font-weight: 600;
    padding-left: 16px;

    &:before {
        content: "";
        width: 10px;
        height: 10px;
        top: 0.28ex;
        border-radius: 50%;
        background: var(--textcolor-comment);
    }

    &.comment-public {
        color: var(--textcolor-comment);
    }
}

/* !-------------------------------------------- */
/* !COMPONENT: Entities --- Validation chips */
/* !-------------------------------------------- */

/* --- Abstract validation results */
.tt-eins .substance-entity.entity-validation {
    font: var(--textset-micro);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    min-height: 19px;
    line-height: 19px;
    white-space: nowrap;
    padding-left: 24px;
    padding-right: 7px;
    border-radius: 10px;
    border: 1px solid transparent;
    outline: 2px solid #fff; /* for colored backgrounds */
    transition: var(--transition-universal);

    &:before {
        content: "";
        height: 20px;
        width: 20px;
        top: 50%;
        margin-top: -10px;
        left: 2px;
        background-position: center;
    }
    
    /* Slightly larger, unlabeled validation chips */
    /* Restricted usage for binary on/off flags in ListViews */
    &.validation-unlabeled {
        text-indent: -1000em;
        overflow: hidden;
        padding-left: 20px;
        padding-right: 0;
        width: 20px;
    }
    
    &.validation-unlabeled:before {
        background-size: 14px;
        left: 0;
    }
}


/* --- Big version (used in ObjectView #actor_header) */
.tt-eins .substance-entity.entity-validation.validation-big {
    font: var(--textset-m);
    font-weight: 700;
    border-radius: 12px;
    padding-left: 30px;
    padding-right: 10px;
    letter-spacing: 0.05em;
    line-height: 24px;
    height: 24px;

    &:before {
        left: 4px;
    }
}


/* --- Validation types */
.tt-eins .substance-entity.entity-validation {
    &.validation-result-attention {
        background-color: rgba(227, 222, 212, 0.7);
        border-color: rgba(102, 93, 78, 0.2);
    }
    
    &.validation-result-ok {
        font-weight: 600;
        background-color: var(--color-state-ok-light-solid);
        border-color: var(--color-state-ok-medium);
    }
    
    &.validation-result-ok.validation-unlabeled {
        border-color: var(--color-state-ok-dark);
    }
    
    &.validation-result-suspicious, 
    &.validation-result-warn {
        background-color: var(--color-state-warn-light-solid);
        border-color: var(--color-state-warn-medium);
    }
    
    &.validation-result-crisis {
        background-color: var(--color-state-crisis-light-solid);
        border-color: var(--color-state-crisis-light);
    }
    
    &.validation-result-attention:before {
        background-image: url(../../static/media/icon_validation_attention.f8bf6383fdc987a571f0.svg);
        background-size: 16px;
    }
    
    &.validation-result-ok:before {
        background-image: url(../../static/media/icon_validation_ok.5ad815141651a003dd58.svg);
    }
    &.validation-result-suspicious:before {
        background-image: url(../../static/media/icon_validation_suspicious.3b23b5d6ee7cd9dfbc09.svg);
    }
    &.validation-result-warn:before {
        background-image: url(../../static/media/icon_validation_warning.eff586cc341c8b81d587.svg);
    }
    &.validation-result-crisis:before {
        background-image: url(../../static/media/icon_validation_crisis.5697c91c77019e1bae21.svg);
    }
}

/* Edge case: attention validation in ObjectView page header */
#actor_header .header-page .page-description .substance-entity.entity-validation.validation-result-attention {
    text-indent: -1000em;
    background: none;
    border: none;
    outline: none;
    padding-left: 16px;
    
    &:before {
        background-image: url(../../static/media/icon_validation_attention_red.aaebf4ae9cf106093d77.svg);
        margin-top: -11px;
    }
}


/* --- Variant: validation result with flyout */
.tt-eins .substance-entity.entity-validation.flyout-controller {
    padding-right: 23px;
    
    /* Arrow icon */
    &:after {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        right: 4px;
        margin-top: -7px;
        height: 14px;
        width: 14px;
        background: transparent url(../../static/media/TEMP_icon_action_menu.a88f3445b1b65e2c6399.svg) center no-repeat;
        transition: var(--transition-transform);
    }
    
    &.flyout-active:after {
        transform: rotateX(180deg);
        transition: var(--transition-transform);
    }
    
    /* Interaction states */
    @media (hover: hover) {
        &:hover {
            border-color: var(--actioncolor);
            background-color: #fff;
            color: #000;
            transition: var(--transition-universal);
        }
    }
    
    &:focus-visible {
        outline: var(--focus-outline-standard);
        outline-offset: 3px;
    }
}


/* --- Variant: clickable validation results (used within ListView tables) */
@media (hover: hover) {
    .tt-eins a:hover .substance-entity.entity-validation {
        border-color: var(--actioncolor);
        background-color: #fff;
        color: #000;
        transition: var(--transition-universal);
    }
}


/* !-------------------------------------------- */
/* !COMPONENT: Entities --- Penalty Incidents */
/* !-------------------------------------------- */

/* --- CENTRAL ENTITY: PENALTY Incidents */
.tt-eins .substance-entity.entity-incident {
    padding-left: 30px;
    min-height: 24px;

    &:before {
        content: "";
        width: 24px;
        height: 24px;
    }
    
    /* Big size */
    &.entity-big {
        padding-left: 50px;
        min-height: 42px;
    }
    
    &.entity-big:before {
        top: 2px;
        width: 42px;
        height: 42px;
        background-size: 40px;
    }
    
    /* Incident types */
    &.incident-type-operations:before {
        background-image: url(../../static/media/icon_incident_operations.f9743f502cbaf4892305.svg);
    }
    &.incident-type-reporting:before {
        background-image: url(../../static/media/icon_incident_reporting.d8b5e899fa1d515c6a3b.svg);
    }
    &.incident-type-sales:before {
        background-image: url(../../static/media/icon_incident_sales.8325507ebd68714c5c0a.svg);
    }
    &.incident-type-staff:before {
        background-image: url(../../static/media/icon_incident_staff.7588694884109ef5481a.svg);
    }
    &.incident-type-stop:before {
        background-image: url(../../static/media/icon_incident_stop.025b92c92c8555a24b6f.svg);
    }
    &.incident-type-vehicle:before {
        background-image: url(../../static/media/icon_incident_vehicle.6f110d824c3b3526f9dd.svg);
    }
    
    /* Incident properties: ID number */
    .entity-id {
        display: inline-block;
        color: inherit;
        font: var(--textset-minus-l);
        margin-right: 2px;
    }
}


/* --- CENTRAL ENTITY: GUARANTEE Cases */
.tt-eins .substance-entity.entity-guarantee {
    padding-left: 28px;
    min-height: 24px;
    
    &:before {
        content: "";
        width: 24px;
        height: 24px;
    }
    
    /* Big size */
    &.entity-big {
        padding-left: 48px;
        min-height: 42px;
    }
    
    &.entity-big:before {
        top: 1px;
        width: 42px;
        height: 42px;
        background-size: 40px;
    }
    
    /* Case types */
    &:before {
        background-image: url(../../static/media/icon_guarantee_generic.0a588dc80706a2e0f66e.svg);
    }
}


/* !-------------------------------------------- */
/* !COMPONENT: Entities --- ELMA Complaints */
/* !-------------------------------------------- */

/* --- CENTRAL ENTITY: ELMA Complaints */
.tt-eins .substance-entity.entity-complaint {
    padding-left: 30px;
    min-height: 24px;

    &:before {
        content: "";
        width: 24px;
        height: 24px;
    }
    
    /* Big size */
    &.entity-big {
        padding-left: 48px;
        min-height: 42px;
    }
    
    &.entity-big:before {
        top: 0;
        width: 42px;
        height: 42px;
        background-size: 40px;
    }
    
    /* Complaint types */
    &:before, 
    &.complaint-type-generic:before {
        background-image: url(../../static/media/icon_complaint_generic.b2d08a4a26a0010b770a.svg);
    }
    &.complaint-type-digital:before {
        background-image: url(../../static/media/icon_complaint_digital.d48510049cc324ab4b02.svg);
    }
    &.complaint-type-operations:before {
        background-image: url(../../static/media/icon_complaint_operations.2f80271b9979a3f3640d.svg);
    }
    &.complaint-type-service:before {
        background-image: url(../../static/media/icon_complaint_service.cc91b738109d10f2cf43.svg);
    }
    &.complaint-type-ticket:before {
        background-image: url(../../static/media/icon_complaint_ticket.a19a93a6b8f6c2bf8ab3.svg);
    }
    
    /* Complaint properties: major category */
    .entity-id {
        display: block;
        color: inherit;
        line-height: 22px;
    }
}


/* !-------------------------------------------- */
/* !COMPONENT: Entities --- Reports */
/* !-------------------------------------------- */

/* --- CENTRAL ENTITY: Generated reports & exports */
.tt-eins .substance-entity.entity-report {
    padding-left: 30px;
    min-height: 24px;

    &:before {
        content: "";
        width: 24px;
        height: 24px;
    }
    
    /* Report + export types */
    &:before, 
    &.report-type-generic:before {
        background-image: url(../../static/media/icon_admin_endpoint.15c010c39f99b581d935.svg);
    }
    &.report-type-listview:before {
        background-image: url(../../static/media/icon_admin_endpoint.15c010c39f99b581d935.svg);
    }
    &.report-type-payment:before {
        background-image: url(../../static/media/icon_admin_endpoint.15c010c39f99b581d935.svg);
    }
}


/* !-------------------------------------------- */
/* !COMPONENT: Entities --- Administration/Data assets */
/* !-------------------------------------------- */

/* --- CENTRAL ENTITY: Administration entities */
.tt-eins .substance-entity.entity-admin {
    padding-left: 32px;
    min-height: 24px;

    &:before {
        content: "";
        width: 24px;
        height: 24px;
    }
    
    /* Big size */
    &.entity-big {
        padding-left: 50px;
        min-height: 42px;
    }
    
    &.entity-big:before {
        top: 3px;
        width: 42px;
        height: 42px;
        background-size: 40px;
    }
    
    /* Admin entity types */
    &:before, 
    &.admin-asset-setting:before, 
    &.admin-asset-endpoint:before {
        background-image: url(../../static/media/icon_admin_endpoint.15c010c39f99b581d935.svg);
    }
    &.admin-asset-person:before {
        background-image: url(../../static/media/icon_admin_person.0989ed5859d78092104e.svg);
    }
    &.admin-asset-content:before {
        background-image: url(../../static/media/icon_admin_content.d43f788c830ec46a1ce0.svg);
    }
    &.admin-asset-constraint:before {
        background-image: url(../../static/media/icon_admin_constraint.ef29533dbbe9b9550eb2.svg);
    }
    &.admin-asset-grid:before {
        background-image: url(../../static/media/icon_admin_grid.3311ceac0c1f796871eb.svg);
    }
    &.admin-asset-organization:before {
        background-image: url(../../static/media/icon_admin_organization.a8eedb4a02d66242afbd.svg);
    }
    
    /* Admin entity type content: unwieldy content */
    &.admin-asset-content.content-adversary {
        word-break: break-all;
        -ms-word-break: break-all;
    }
    
    /* Additional qualifier strings */
    p + p {
        font-weight: 400;
        margin-top: 4px;
    }
}


/* !-------------------------------------------- */
/* !COMPONENT: Entities --- Generic trip aspects */
/* !-------------------------------------------- */

/* --- TRIP GENERICS: properties & sub-entities of public transport trips */
.tt-eins .substance-entity.entity-trip {
    min-height: 22px;
    padding-left: 28px;
    padding-top: 5px;

    &:before {
        content: "";
        height: 22px;
        width: 22px;
    }

    &.trip-aspect-operator:before,
    &.trip-aspect-staff:before {
        background-image: url(../../static/media/icon_trip_staff.70ea0660226f8ceaa068.svg);
    }

    &.trip-aspect-line:before,
    &.trip-aspect-linebundle:before {
        background-image: url(../../static/media/icon_trip_route.248db76a69ef77efbd01.svg);
    }

    &.trip-aspect-stop:before {
        background-image: url(../../static/media/icon_trip_stop.9a1ccdd70cbba40528bc.svg);
    }

    &.trip-aspect-ticket:before {
        background-image: url(../../static/media/icon_trip_ticket.f05fc269a2be30a30106.svg);
    }

    &.trip-aspect-vehicle:before {
        background-image: url(../../static/media/icon_trip_vehicle.57d5e4c5b6644bf45517.svg);
    }

    &.trip-aspect-passenger:before {
        background-image: url(../../static/media/icon_trip_passenger.83f022385a03c57828d6.svg);
        top: -1px;
    }

    .entity-id {
        /* Emphasis on major property */
        display: inline-block;
        color: inherit;
        text-transform: uppercase;
        font-size: 80%;
        font-weight: bolder;
        letter-spacing: 0.05em;

        &:after {
            content: ": ";
            font-weight: bolder;
        }
    }
}


/* !-------------------------------------------- */
/* !COMPONENT: Entities --- Vehicle types (used in route tables) */
/* !-------------------------------------------- */

/* --- ROUTE TABLES: Vehicle type pool */
.tt-eins .substance-entity.entity-vehicle {
    padding-left: 28px;
    padding-top: 4px;
    min-height: 22px;
    
    /* Set a generic and unknown vehicle icon */
    &:before {
        content: "";
        width: 22px;
        height: 22px;
        background-image: url(../../static/media/icon_vehicle_generic.c90a6e7a5b97c6beb88b.svg);
    }
    
    &.vehicle-unknown:before {
        background-image: url(../../static/media/icon_vehicle_unknown.b941dedad61ed675004e.svg);
    }
    
    /* Mapping of internal Transity core types to main icons (based on TRIAS vehicle types) */
    &.vehicle-air:before {
        background-image: url(../../static/media/icon_vehicle_plane.c74abb817de00160c91c.svg);
    }
    
    &.vehicle-coach:before, 
    &.vehicle-coach-internationalCoach:before, 
    &.vehicle-coach-nationalCoach:before, 
    &.vehicle-coach-shuttleCoach:before, 
    &.vehicle-coach-regionalCoach:before, 
    &.vehicle-coach-specialCoach:before, 
    &.vehicle-coach-sightseeingCoach:before, 
    &.vehicle-coach-touristCoach:before, 
    &.vehicle-coach-commuterCoach:before, 
    &.vehicle-trolleyBus:before, 
    &.vehicle-bus:before, 
    &.vehicle-bus-localBus:before, 
    &.vehicle-bus-regionalBus:before, 
    &.vehicle-bus-expressBus:before, 
    &.vehicle-bus-nightBus:before, 
    &.vehicle-bus-postBus:before, 
    &.vehicle-bus-specialNeedsBus:before, 
    &.vehicle-bus-mobilityBus:before, 
    &.vehicle-bus-mobilityBusForRegisteredDisabled:before, 
    &.vehicle-bus-sightseeingBus:before, 
    &.vehicle-bus-shuttleBus:before, 
    &.vehicle-bus-schoolBus:before, 
    &.vehicle-bus-schoolAndPublicServiceBus:before, 
    &.vehicle-bus-railReplacementBus:before, 
    &.vehicle-bus-demandAndResponseBus:before, 
    &.vehicle-bus-airportLinkBus:before {
        background-image: url(../../static/media/icon_vehicle_bus.b836897b4a12d30d0bd9.svg);
    }
    
    &.vehicle-metro:before, 
    &.vehicle-metro-tube:before, 
    &.vehicle-metro-urbanRailway:before, 
    &.vehicle-urbanRail:before, 
    &.vehicle-tram:before, 
    &.vehicle-tram-cityTram:before, 
    &.vehicle-tram-localTram:before, 
    &.vehicle-tram-regionalTram:before, 
    &.vehicle-tram-sightseeingTram:before, 
    &.vehicle-tram-shuttleTram:before, 
    &.vehicle-rail-rackAndPinionRailway:before {
        background-image: url(../../static/media/icon_vehicle_tram.f4451a1b862fae104104.svg);
    }
    
    &.vehicle-intercityRail:before, 
    &.vehicle-rail:before, 
    &.vehicle-rail-local:before, 
    &.vehicle-rail-highSpeedRail:before, 
    &.vehicle-rail-suburbanRailway:before, 
    &.vehicle-rail-regionalRail:before, 
    &.vehicle-rail-interregionalRail:before, 
    &.vehicle-rail-longDistance:before, 
    &.vehicle-rail-international:before, 
    &.vehicle-rail-sleeperRailService:before, 
    &.vehicle-rail-nightRail:before, 
    &.vehicle-rail-carTransportRailService:before, 
    &.vehicle-rail-touristRailway:before, 
    &.vehicle-rail-railShuttle:before, 
    &.vehicle-rail-replacementRailService:before, 
    &.vehicle-rail-specialTrain:before, 
    &.vehicle-rail-crossCountryRail:before {
        background-image: url(../../static/media/icon_vehicle_train.67cd6f39a2364215f932.svg);
    }
    
    &.vehicle-monorail:before {
        background-image: url(../../static/media/icon_vehicle_monorail.bb2d4cb58bcfe21ee10d.svg);
    }
    
    &.vehicle-water:before {
        background-image: url(../../static/media/icon_vehicle_ship.634431b135bbbe1573ec.svg);
    }
    
    &.vehicle-funicular:before, 
    &.vehicle-cableway:before {
        background-image: url(../../static/media/icon_vehicle_cableway.744384aa0423d3cd1f82.svg);
    }
    
    &.vehicle-taxi:before {
        background-image: url(../../static/media/icon_vehicle_taxi.bbf7f83e91df0724f8d9.svg);
    }
}


/* !-------------------------------------------- */
/* !COMPONENT: Entities --- Users */
/* !-------------------------------------------- */

/* --- Users */
.tt-eins .substance-entity.entity-user {
    min-height: 23px;
    padding-left: 28px;
    padding-top: 4px;

    &.user-recipient {
        padding-left: 56px;
    }
    
    /* Icon spaces */
    &:before {
        content: "";
        height: 22px;
        width: 22px;
        top: -1px;
        background-image: url(../../static/media/icon_user.6e005dc7e7c30ea1cf19.svg);
    }
    
    &.user-recipient:before {
        left: 28px;
    }
    
    &.user-recipient:after {
        content: "";
        display: block;
        position: absolute;
        height: 22px;
        width: 22px;
        left: 3px;
        top: 0;
        background: transparent center url(../../static/media/icon_user_recipient.f36399fb59e3b472fea6.svg) no-repeat;
    }
    
    /* Basic user classes */
    &.user-level-passenger:before {
        background-image: url(../../static/media/icon_user_passenger.b730967ff71b7ed9d33a.svg);
    }
    
    &.user-level-system:before {
        background-image: url(../../static/media/icon_user_system.e58f2640d748062b837c.svg);
    }
    
    /* Level hierarchy for registered Transity users */
    &.user-level-1:before {
        background-image: url(../../static/media/icon_user_level1.6b5baf6054b2a22676a1.svg);
    }
    &.user-level-2:before {
        background-image: url(../../static/media/icon_user_level2.54d020e5d511d1238a76.svg);
    }
    &.user-level-3:before {
        background-image: url(../../static/media/icon_user_level3.a9a2a1ceebc7b3d48d07.svg);
    }
    
    /* Abstract icon for main navigation bar */
    &.entity-inverse:before {
        background-image: url(../../static/media/icon_user_white.2caa00975e9a031a10ec.svg);
    }
    
    &.entity-inverse.user-impersonated:before {
        background-position: center -160px;
    }
    
    /* Icon-only variant */
    &.entity-icon {
        padding-left: 0;
        width: 22px;
    }
}


/* --- User elements with flyout functionality */
.tt-eins .substance-entity.entity-user.flyout-controller {
    padding-right: 21px;
    padding-top: 0;
    transition: var(--transition-universal);

    &.entity-icon {
        width: 43px;
    }
    
    /* Arrow icon */
    &:after {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        right: 4px;
        margin-top: -7px;
        height: 14px;
        width: 14px;
        background: transparent url(../../static/media/TEMP_icon_action_menu.a88f3445b1b65e2c6399.svg) center no-repeat;
        transition: var(--transition-transform);
    }
    
    &.flyout-active:after {
        transform: rotateX(180deg);
        transition: var(--transition-transform);
    }
    
    /* Interaction states */
    @media (hover: hover) {
        &:hover {
            color: #000;
            transition: var(--transition-universal);
        }
    }
    
    &:focus-visible {
        outline: var(--focus-outline-standard);
        outline-offset: 3px;
    }
}


/* --- Variant with 2 lines */
.tt-eins .substance-entity.entity-user.user-detailed {
    height: 26px;

    &:before {
        top: 1px;
    }
    
    * {
        font: var(--textset-s);
    }
    
    .user-category {
        font-weight: 500;
    }
}


/* !-------------------------------------------- */
/* !COMPONENT: Entities --- Document attachments */
/* !-------------------------------------------- */

.tt-eins .substance-entity.entity-attachment {
    min-height: 22px;
    padding-left: 28px;
    padding-top: 4px;

    &.entity-icon {
        padding-left: 0;
        width: 22px;
    }

    &:before {
        content: "";
        height: 22px;
        width: 22px;
        background-image: url(../../static/media/icon_attachment.8415079add55153e0373.svg);
    }

    &.attachment-file:before {
        background-image: url(../../static/media/icon_attachment_file.bea84c4af893b17ce80e.svg);
    }

    &.attachment-image:before {
        background-image: url(../../static/media/icon_attachment_image.8b95b6d07831d9f515b2.svg);
    }
}


/* !-------------------------------------------- */
/* !COMPONENT: Entities --- Goodwill */
/* !-------------------------------------------- */

.tt-eins .substance-entity.entity-goodwill {
    min-height: 22px;
    line-height: 22px;
    padding-left: 28px;
    
    &:before {
        content: "";
        height: 22px;
        width: 22px;
        background-image: url(../../static/media/icon_goodwill_requested.0bf36e76c91d5e8c296d.svg);
    }
    
    &.entity-icon {
        padding-left: 0;
        width: 22px;
    }
    
    &.goodwill-granted:before, 
    &.goodwill-denied:before {
        background-image: url(../../static/media/icon_goodwill_granted.510a0e2fcef286258f9f.svg);
    }
    
    &.goodwill-denied:before {
        transform: rotateX(180deg);
    }
}


/* !-------------------------------------------- */
/* !COMPONENT: Entities --- Workflow state */
/* !-------------------------------------------- */

/* --- Entity workflow state */
.tt-eins .substance-entity.entity-state {
    height: 22px;
    white-space: nowrap;
    border: 1px solid var(--entity-state-color);
    border-radius: var(--radius-panel);
    font: var(--textset-plus-s);
    line-height: 22px;
    font-weight: 200;
    letter-spacing: 0.03em;
    padding: 0 6px 0 21px;
    color: var(--textcolor-standard);
    overflow: hidden;
    background: #fff;
    transition: var(--transition-color);
    
    /* Default is an ARCHIVED state */
    --entity-state-color: var(--color-state-archived);
    
    &.entity-icon {
        padding: 0;
        width: 17px;
    }
    
    /* Icon container */
    &:before {
        content: "";
        height: 100%;
        width: 16px;
        background: var(--entity-state-color) 2px center no-repeat;
    }
}

/* Interaction states */
@media (hover: hover) {
    .tt-eins .link-action:hover .substance-entity.entity-state {
        background-color: var(--entity-state-color);
        color: #fff;
        transition: var(--transition-color);
    }
}

/* State cadence */
.tt-eins .substance-entity.entity-state {
    /* OPEN states */
    &.state-type-open {
        --entity-state-color: var(--color-state-open);
        font-weight: 700;
    }
    &.state-type-open:before {
        background-image: url(../../static/media/icon_workflow_new.fa887d28c99c019b4b32.svg);
    }
    
    /* IN PROGRESS states */
    &.state-type-progress {
        --entity-state-color: var(--color-state-progress);
        font-weight: 500;
    }
    &.state-type-progress:before {
        background-image: url(../../static/media/icon_workflow_progress.b1c8f80fc54e2bc14744.svg);
    }
    
    /* TRANSFER states (work in progress) */
    &.state-type-transfer {
        --entity-state-color: var(--color-state-transfer);
        font-weight: 500;
    }
    &.state-type-transfer:before {
        background-image: url(../../static/media/icon_workflow_transfer.b43abadb43728998d01d.svg);
    }
    
    /* COMPLETED states */
    &.state-type-done {
        --entity-state-color: var(--color-state-completed);
        font-weight: 400;
    }
    &.state-type-done:before {
        background-image: url(../../static/media/icon_workflow_finished.071e2ef38adb33c3c2fb.svg);
    }
}

/* ID content instead of state label */
.tt-eins .substance-entity.entity-state:has(.substance-id) {
    font: inherit;
    letter-spacing: inherit;
    padding-right: 0;
}

@media (hover: hover) {
    .tt-eins a:hover .substance-entity.entity-state .substance-id {
        color: #fff;
    }
    
    .tt-eins a:hover .substance-entity.entity-state .substance-id > * {
        color: #000;
        color: initial;
    }
}


/* !-------------------------------------------- */
/* !COMPONENT: Entities --- Communication channels */
/* !-------------------------------------------- */

.tt-eins .substance-entity.entity-channel {
    min-height: 22px;
    padding-left: 29px;
    padding-top: 2px;

    &.entity-icon {
        padding: 0;
        width: 22px;
    }

    &:before {
        content: "";
        height: 22px;
        width: 22px;
    }

    &.channel-type-analog:before {
        background-image: url(../../static/media/icon_channel_analog.598fb0061294cc2f4bb3.svg);
    }

    &.channel-type-app:before {
        background-image: url(../../static/media/icon_channel_app.148796ed07d5c8f6d257.svg);
    }

    &.channel-type-personal:before {
        background-image: url(../../static/media/icon_channel_personal.0dbf139de486308ec2c7.svg);
    }

    &.channel-type-voice:before {
        background-image: url(../../static/media/icon_channel_voice.39a2d5e763f98aec7162.svg);
    }

    &.channel-type-web:before {
        background-image: url(../../static/media/icon_channel_web.d0eb8b57fcd3b5ae3312.svg);
    }

    &.channel-type-email:before {
        background-image: url(../../static/media/icon_channel_email.1842784f219626dc3791.svg);
    }

    &.channel-type-phone:before {
        background-image: url(../../static/media/icon_channel_phone.479eb7595d7cc97e0c1d.svg);
    }

    &.channel-type-fax:before {
        background-image: url(../../static/media/icon_channel_fax.e69b091b320c7a8f1eb8.svg);
    }

    &.channel-type-guarantee:before {
        background-image: url(../../static/media/icon_channel_guarantee.d1e5f5516376cecfd894.svg);
    }
}


/* !-------------------------------------------- */
/* !COMPONENT: Entities --- Dunning level */
/* !-------------------------------------------- */

.tt-eins .substance-entity.entity-dunning {
    padding-left: 0;
    
    &:before {
        display: none;
    }
    
    &.dunning-verbose {
        height: 22px;
    }
    
    &.dunning-level-1 {
        
    }
    
    &:not(.dunning-verbose) .dunning-title {
        display: none;
    }
    
    .dunning-value {
        
    }
}


/* !-------------------------------------------- */
/* !COMPONENT: ID numbers/identifiers for entities etc. */
/* !-------------------------------------------- */

/* !--- Outer container */
.tt-eins .substance-id {
    display: inline-block;
    position: relative;
    white-space: nowrap;
    font: var(--textset-plus-s);
    font-family: var(--font-id);

    /* Display of ID prefix */
    .id-prefix {
        display: none;
    }
    
    &.id-verbose .id-prefix {
        display: inline-block;
        font: var(--textset-m);
        font-weight: 500;
        margin-right: -0.2em;
    }
    
    &.id-verbose.id-placeholder .id-prefix {
        margin-right: 0;
    }
}


/* !--- Placeholder state for any ID */
.tt-eins .substance-id.id-placeholder {
    font-family: var(--font-base); /* back to normal because font-id doesn't support letters (yet) */
}


/* !--- Display of ID suffices */
.tt-eins .substance-id {
    .id-suffix {
        display: inline-block;
        font: var(--textset-m);
        margin-left: -0.3em;
    }
    
    &.id-placeholder .id-suffix {
        margin-left: 0;
    }
    
    /* Complaint points */
    .id-suffix.suffix-point {
        font-family: var(--font-id);
        background: var(--backcolor-id-point);
        display: inline-block;
        padding: 2px 3px 2px 3px;
        font-weight: 600;
        
        @media (hover: hover) {
            cursor: inherit;
        }
    }
    
    .id-suffix.suffix-point:only-child {
        margin-left: 0;
    }
}


/* !--- Case & Asset IDs */
.tt-eins .substance-id.id-case, 
.tt-eins .substance-id.id-asset { 
}


/* !--- Index numbers (used in .substance-toolchain.toolchain-index) */
.tt-eins .substance-id.id-index {
    display: block;
}


/* !--- Special case: German IBAN */
.tt-eins .substance-id.id-iban {
    display: inline;
    font: var(--textset-s);
    font-family: var(--font-id);
    white-space: nowrap;
}


/* !--- IDs linking to ObjectViews */
.tt-eins .link-action:has(> .substance-id) {
    height: 22px;
    border: 1px solid var(--linecolor-light);
    border-radius: var(--radius-panel);
    padding: 0 6px 0 6px;
    background: #fff;
    transition: var(--transition-color);
}

.tt-eins .link-action:has(> .substance-id .id-suffix.suffix-point) {
    padding-right: 0;
    overflow: hidden;
}

.tt-eins .link-action > .substance-id {
    line-height: 21px;
}

.tt-eins .link-action > .substance-id .id-suffix:not(.suffix-point) {
    margin-top: 4px;
}

/* Interaction states */
@media (hover: hover) {
    .tt-eins .link-action:has(> .substance-id):hover {
        background-color: var(--backcolor-medium);
        transition: var(--transition-color);
    }
}


/* !-------------------------------------------- */
/* !COMPONENT: Placeholders */
/* !-------------------------------------------- */

@media (hover: hover) {
    .tt-eins .substance-placeholder:hover {
       cursor: text;
    }
}


/* !-------------------------------------------- */
/* !COMPONENT: Temporal Object */
/* !-------------------------------------------- */

/* --- General container (supposed to be <time>) */
.tt-eins .substance-timestamp {
    display: block;
    position: relative;
    overflow: hidden;
    
    &.timestamp-linear {
        white-space: nowrap;
    }
    
    /* Interaction states */
    @media (hover: hover) {
        &[datetime]:hover {
            cursor: help;
        }
        
        /* TODO: remove this exception when TB-1198 has been resolved */
        &[title=""]:hover {
            cursor: inherit;
        }
    }
}

/* --- Component containers */
.tt-eins .substance-timestamp {
    > span {
        display: block;
    }
    
    /* Deadline title */
    .timestamp-title {
    }
    
    /* Day name */
    .timestamp-day {
        font-weight: 500;
    }
    
    /* Full date string */
    .timestamp-date {
        font-weight: 500;
        white-space: nowrap;
    }
    
    .timestamp-date abbr {
        pointer-events: none; /* we don't want :hover for a written-out month name */
    }
    
    /* Time string */
    .timestamp-time {
        white-space: nowrap;
    }
    
    /* Relative date to today */
    .timestamp-relative {
        white-space: nowrap;
    }
}


/* --- Linear display */
.tt-eins .substance-timestamp.timestamp-linear {
    > * {
        display: inline-block;
    }
    
    .timestamp-title:after, 
    .timestamp-day:after {
        content: ":";
        margin-right: 0.2em;
    }
    
    .timestamp-time:before, 
    .timestamp-relative:before {
        content: "–";
        display: inline-block;
        margin: 0 0.25em 0 0.25em;
    }
    
    .timestamp-title + .timestamp-relative:before {
        display: none;
    }
}


/* --- Due & Overdue state */
/* Set state icon */
.tt-eins .substance-timestamp.timestamp-due > *:first-child, 
.tt-eins .substance-timestamp.timestamp-overdue > *:first-child {
    padding-left: 1.15em;
    position: relative;
}

.tt-eins .substance-timestamp.timestamp-due > *:first-child:before, 
.tt-eins .substance-timestamp.timestamp-overdue > *:first-child:before {
    content: "";
    display: block;
    position: absolute;
    top: 0.125em;
    left: 0;
    width: 0.85em;
    height: 0.85em;
    background: transparent center no-repeat;
    background-size: 100%;
}

.tt-eins .substance-timestamp.timestamp-due > *:first-child:before {
    background-image: url(../../static/media/icon_validation_warning.eff586cc341c8b81d587.svg);
}

.tt-eins .substance-timestamp.timestamp-overdue > *:first-child:before {
    background-image: url(../../static/media/icon_validation_crisis.5697c91c77019e1bae21.svg);
    top: 0.14em;
}

/* Screenreader only: narrated state */
.tt-eins .substance-timestamp .timestamp-state {
    text-indent: -1000em;
    width: 1px;
    height: 1px;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
}


/* --- Due & Overdue state: Relative deadlines  */
/* Emphasis depending on warning level */
.tt-eins .substance-timestamp.timestamp-due .timestamp-relative, 
.tt-eins .substance-timestamp.timestamp-overdue .timestamp-relative {
    font-weight: 500;
}

/* Compact deadline display */
.tt-eins .substance-timestamp .timestamp-relative.relative-compact {
    font-weight: 500;
    
    .compact-value:before {
        content: "–";
        font: var(--textset-l);
        font-weight: 900;
        line-height: 13px;
    }
    
    &.compact-future .compact-value:before {
        content: "+";
        display: inline-block;
        margin-right: 0.05em;
        position: relative;
        top: 0.1ex;
    }
    
    .compact-unit:before {
        content: " ";
    }
    
    .compact-unit {
        font-weight: 400;
    }
}


/* !-------------------------------------------- */
/* !COMPONENT: Counter */
/* !-------------------------------------------- */

.tt-eins .substance-counter {
    display: inline-block;
    color: #fff;
    font: var(--textset-m);
    font-weight: 700;
    line-height: 15px;
    text-align: center;
    text-indent: 0;
    background: var(--backcolor-accent);
    border: 1px solid transparent;
    padding: 2px 8px 2px 8px;
    border-radius: 10px;

    &.counter-type-light {
        color: var(--textcolor-accent);
        background: #fff;
        border: 1px solid var(--linecolor-accent);
    }
    
    /* Smaller version for main navigation */
    &.counter-size-mini {
        background-color: var(--backcolor-counter);
        border-radius: 10px;
        min-width: 20px;
        height: 20px;
        font: var(--textset-micro);
        font-weight: 800;
        line-height: 20px;
        padding: 0 4px 0 4px;
    }
}


/* --- Stateful versions */
.tt-eins .substance-counter {
    &.counter-level-ok {
        background-color: var(--color-state-ok);
        color: #000;
        font-weight: 500;
    }
    
    &.counter-level-warn {
        background-color: var(--color-state-warn);
        color: #000;
    }
    
    &.counter-level-crisis {
        background-color: var(--color-state-crisis);
    }
}


/* --- Counters with 0 */
.tt-eins .substance-counter.counter-zero {
    display: none;
}

.tt-eins .substance-counter.counter-zero.flyout-controller {
    display: inline-block;
    font-weight: 400;
}


/* --- Variant: selection counters with flyout */
/* This variant might be DEPRECATED */
.tt-eins .substance-counter.flyout-controller {
    padding-right: 23px;
    position: relative;
    transition: var(--transition-universal);

    &.counter-type-light {
        border-color: var(--actioncolor);
        color: var(--actioncolor);
    }
    
    /* Arrow */
    &:after {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        right: 4px;
        margin-top: -7px;
        height: 14px;
        width: 14px;
        background: transparent url(../../static/media/TEMP_icon_action_menu_white.e66f78d75f9de755e0a3.svg) center no-repeat;
        transition: var(--transition-transform);
    }
    
    &.counter-type-light:after {
        background-image: url(../../static/media/TEMP_icon_action_menu.a88f3445b1b65e2c6399.svg);
    }
    
    &.flyout-active:after {
        transform: rotateX(180deg);
        transition: var(--transition-transform);
    }
    
    /* Interaction states */
    @media (hover: hover) {
        &:hover {
            background-color: var(--backcolor-counter);
            transition: var(--transition-universal);
        }
        
        &.counter-type-light:hover {
            background-color: #fff;
            border-color: #000;
            color: #000;
        }
    }
    
    &:focus-visible {
        outline: var(--focus-outline-standard);
        outline-offset: 3px;
    }
}


/* --- Variant: selection counters with direct download action */
.tt-eins .substance-counter.action-download {
    padding-left: 28px;
    position: relative;
    transition: var(--transition-universal);

    &:before {
        content: "";
        position: absolute;
        display: block;
        height: 20px;
        width: 20px;
        top: 50%;
        left: 5px;
        transform: translateY(-50%);
        background: transparent url(../../static/media/icon_action_download_white.8c6173c52e1c4183c71c.svg) center no-repeat;
    }
    
    /* Interaction states */
    @media (hover: hover) {
        &:hover {
            background-color: var(--backcolor-counter);
            transition: var(--transition-universal);
        }
    }
    
    &:focus-visible {
        outline: var(--focus-outline-accent);
        outline-offset: 3px;
    }
}

/* DEV upwards: reshape surrounding, separate link to produce rounded :focus outline */
.tt-eins .link-action:has(> .substance-counter.action-download) {
    border-radius: 10px;
}

.tt-eins .link-action:has(> .substance-counter.action-download):focus-visible {
    outline: var(--focus-outline-accent);
}


/* !-------------------------------------------- */
/* !COMPONENT: Messages & notifications */
/* !-------------------------------------------- */

.tt-eins .substance-message {
    /* --- Message container */
    padding: 10px 20px 10px 20px;
    background: var(--backcolor-standard);
    color: var(--textcolor-standard);

    .substance-richtext h4 {
        /* --- Headline and description */
        padding-left: 24px;
        background: transparent 0 0 no-repeat;
        background-size: 17px;
        font-weight: 500;
        margin-bottom: 0.5em;
        color: var(--textcolor-standard);
    }
    
    .substance-richtext h4:only-child {
        margin-bottom: 0;
    }
    
    /* State adaption of main message headline */
    &.message-level-info .substance-richtext h4 {
        background-image: url(../../static/media/icon_validation_info.5b8634f0274bf134cbf8.svg);
    }

    &.message-level-ok .substance-richtext h4 {
        background-image: url(../../static/media/icon_validation_ok.5ad815141651a003dd58.svg);
    }

    &.message-level-warn .substance-richtext h4 {
        background-image: url(../../static/media/icon_validation_warning.eff586cc341c8b81d587.svg);
    }

    &.message-level-crisis .substance-richtext h4 {
        background-image: url(../../static/media/icon_validation_crisis.5697c91c77019e1bae21.svg);
    }

    &.message-level-suspicious .substance-richtext h4 {
        background-image: url(../../static/media/icon_validation_suspicious.3b23b5d6ee7cd9dfbc09.svg);
    }
    
    /* --- Embedded primary actions */
    .primary-action.action-size-mini {
    }
    
    /* --- Timestamp */
    .substance-timestamp {
        font: var(--textset-s);
        margin-top: 10px;
        text-align: right;
    }
}

/* !-------------------------------------------- */
/* !COMPONENT: Communication issues (for arbitrary UI components) */
/* !-------------------------------------------- */

.tt-eins .substance-communication {
    padding: 10px;
    border: 1px solid transparent !important;
    background: #fff 10px 10px no-repeat !important;
    background-size: 20px !important;
    min-height: 40px !important;
    min-width: 40px !important;

    /* TO DO: Loading animation */
    &.communication-load {
        min-height: 0;
        text-align: center; /* preliminary for React loading animation */
    }
    
    /* Communication errors */
    &.communication-timeout {
        border-color: var(--color-state-warn) !important;
        background-color: var(--color-state-warn-light) !important;
        background-image: url(../../static/media/icon_validation_warning.eff586cc341c8b81d587.svg) !important;
    }
    
    &.communication-blocked, 
    &.communication-fail {
        border-color: var(--color-state-crisis) !important;
        background-color: rgba(232, 77, 15, 0.1) !important;
        background-image: url(../../static/media/icon_validation_crisis.5697c91c77019e1bae21.svg) !important;
    }
    
    /* Error message */
    .communication-message {
        color: #000 !important;
        font-weight: 500 !important;
        font-size: 13px !important;
        line-height: 1.2;
    }
    
    &.communication-blocked .communication-message, 
    &.communication-timeout .communication-message, 
    &.communication-fail .communication-message {
        padding-left: 30px;
    }
}


/* !-------------------------------------------- */
/* !COMPONENT: File uploader */
/* This component is based on dropzone.js, so we're overriding the default styles for .dz-* classes */
/* !-------------------------------------------- */

/* --- Dropzone container + label */
.tt-eins .substance-uploader label:not(.title-required):after {
    content: " (optional)";
    font-weight: 400;
}

/* --- Dropzone with message */
.tt-eins .substance-uploader {
    .dropzone {
        background-color: var(--field-backcolor);
        border: 1px solid var(--field-bordercolor);
        padding: 10px;
        min-height: 0;
        border-radius: var(--field-radius);
        transition: var(--transition-universal);
        text-align: center;
    }

    /* Interaction states */
    @media (hover: hover) {
        .dropzone:hover {
            background-color: var(--field-backcolor-hover);
            border-color: var(--field-bordercolor-hover);
        }
    }
    
    .dropzone.dz-drag-hover {
        border-color: var(--field-bordercolor-focus);
        background-color: var(--field-backcolor-focus);
    }
    
    .dz-clickable:focus-visible {
        outline: var(--focus-outline-standard);
        outline-offset: 3px;
    }
    
    /* Upload explanation */
    .dropzone .dz-message {
        margin: 0 0 10px 0;
    }
    
    .dropzone .dz-message:only-child {
        margin-bottom: 0;
    }
    
    .dropzone.dz-started .dz-message {
        display: block;
        margin-bottom: 20px;
    }
    
    /* Manual upload button */
    .dropzone .dz-message .action-upload {
        display: inline-block;
        font: var(--textset-plus-m);
        font-weight: 500;
        background: transparent;
        white-space: normal;
        text-transform: none;
        text-align: center;
        border: none;
        padding: 30px 0 0 0;
        height: auto;
    }
    
    @media (hover: hover) {
        .dropzone .dz-message .action-upload:hover {
            background: transparent;
        }
    }
    
    .dropzone .dz-message .action-upload:before {
        top: -3px;
        left: 50%;
        height: 30px;
        width: 30px;
        background-size: 20px;
        transform: translateX(-50%);
    }
}


/* --- File & image thumbnails */
.tt-eins .substance-uploader .dropzone {
    .dz-preview {
        width: 120px; /* dropzone.js initializes dz-image to 120px width */
        margin: 0 10px 10px 0;
        transition: var(--transition-opacity);
        z-index: 1 !important; /* prevents weird upward strike-through on :hover on related Delete button */
    }
    
    &.dz-drag-hover .dz-preview {
        opacity: 0.5;
        transition: var(--transition-opacity);
    }
    
    .dz-preview.dz-image-preview {
        background: transparent;
    }
    
    .dz-preview.dz-file-preview {
        background: transparent;
    }
    
    .dz-preview.dz-image-preview .dz-image, 
    .dz-preview.dz-file-preview .dz-image {
        background: #fff;
        border-radius: 0;
    }
    
    .dz-preview.dz-file-preview .dz-image {
        background: var(--backcolor-bullet);
    }
    
    .dz-preview.dz-file-preview .dz-image img:not([src]) {
        display: none;
    }
    
    /* Interaction states */
    @media (hover: hover) {
        .dz-preview:hover .dz-image img {
            filter: none;
            transform: none;
        }
    }
}


/* --- State indicators: Uploading, Success, Failure */
.tt-eins .substance-uploader .dropzone .dz-preview {
    /* Progress bar */
    .dz-progress {
        top: 90px;
        left: 10px;
        right: 10px;
        width: auto;
        margin: 0;
        border-color: #fff;
        border-radius: var(--radius-panel);
        background-color: rgba(255,255,255,0.7);
        z-index: 10;
    }
    
    &:not(.dz-processing) .dz-progress {
        animation: none;
    }
    
    .dz-progress .dz-upload {
        background: var(--backcolor-uploader-progress);
    }
    
    /* Icons for successful/failed upload */
    .dz-success-mark, 
    .dz-error-mark {
        top: 0;
        left: auto;
        right: 0;
        width: 30px;
        height: 30px;
        margin: 0;
        background: rgba(255,255,255,0.4) center no-repeat;
        background-size: 20px;
        z-index: 15;
    }
    
    &.dz-success .dz-success-mark, 
    &.dz-error .dz-error-mark {
        animation: none;
        opacity: 1;
    }
    
    .dz-success-mark svg, 
    .dz-error-mark svg {
        display: none;
    }
    
    .dz-success-mark {
        background-image: url(../../static/media/icon_validation_ok.5ad815141651a003dd58.svg);
    }
    
    .dz-error-mark {
        background-image: url(../../static/media/icon_validation_crisis.5697c91c77019e1bae21.svg);
    }
}


/* --- Filename */
.tt-eins .substance-uploader .dropzone .dz-preview .dz-details {
    position: static;
    padding: 0;
    color: inherit;
    opacity: 1;

    .dz-filename {
        overflow: hidden;
        text-overflow: ellipsis;
        font: var(--textset-s);
        font-weight: 400;
        color: var(--textcolor-standard);
    }
    
    .dz-filename span {
        background: transparent;
        padding: 0;
        border: none;
    }
    
    /* Interaction states */
    @media (hover: hover) {
        .dz-filename:hover span {
            background: transparent;
            padding: 0;
            border: none;
        }
    }
}


/* --- Individual error message per file */
.tt-eins .substance-uploader .dropzone .dz-preview .dz-error-message {
    opacity: 1;
    top: auto;
    bottom: 70px;
    left: 10px;
    right: 10px;
    width: auto;
    background: none;
    padding: 0;
    text-align: center;
    font: var(--textset-s);
    color: #fff;
    text-shadow: 0 0 4px rgba(0,0,0,1);
}

.tt-eins .substance-uploader .dropzone .dz-preview .dz-error-message:after {
    display: none;
}


/* --- Delete button */
.tt-eins .substance-uploader .dropzone .dz-preview .dz-remove {
    font: var(--textset-m);
    text-align: left;
    margin-top: 10px;
    border: 1px solid var(--actioncolor-shade-light);
}

/* Interactions states */
@media (hover: hover) {
    .tt-eins .substance-uploader .dropzone .dz-preview .dz-remove:hover {
        text-decoration: none;
        border-color: #000;
    }
}

/* :focus-visible inherits from .primary-action */


/* !-------------------------------------------- */
/* !COMPONENT: Structured text (from Markdown sources) */
/* !-------------------------------------------- */

.tt-eins .substance-richtext {
    -webkit-hyphens: auto;
    hyphens: auto;
}

.tt-eins .substance-richtext.richtext-foreign {
    white-space: pre-line;
}

.tt-eins .substance-richtext * {
    font-weight: 400;
    line-height: 1.4;
}


/* --- Headlines */
.tt-eins .substance-richtext {
    /* h1 shouldn't be used here */
    h1, 
    h2 {
        margin-top: 1.2em;
        font: var(--textset-xl);
        color: inherit;
        padding-bottom: 0.1em;
        border-bottom: var(--line-standard);
        margin-bottom: 0.4em;
    }
    
    h3 {
        margin-top: 1.2em;
        font: var(--textset-plus-l);
        color: inherit;
        margin-bottom: 0.3em;
    }
    
    /* h5 + h6 shouldn't be used here */
    h4, 
    h5, 
    h6 {
        font: var(--textset-minus-l);
        font-weight: 400;
        color: inherit;
        margin-bottom: 0.3em;
    }
    
    h1:first-child, 
    h2:first-child, 
    h3:first-child, 
    h4:first-child, 
    h5:first-child, 
    h6:first-child {
        margin-top: 0;
    }
}


/* --- Paragraphs + emphasis */
.tt-eins .substance-richtext {
    p {
        margin-bottom: 0.9em;
    }
    
    /* Emphasis */
    em, 
    b {
        font-weight: 500;
    }
    
    strong {
        font-weight: 800;
    }
    
    i {
        font-style: italic;
    }
    
    /* Strike-through */
    del {
        font-weight: inherit;
    }
    
    /* Adversary strings (enforced linebreaks for filenames, mostly) –– NOT USED YET */
    span.richtext-adversary {
        font-weight: 500;
        word-break: break-all;
        -ms-word-break: break-all;
    }
}


/* --- Embedded links */
.tt-eins .substance-richtext {
    a {
        font-weight: 700;
        display: inline;
    }
    
    a:before {
        content: "→\00a0";
        color: inherit;
        font-weight: 200;
    }
    
    a:not([class]) {
        color: var(--textcolor-standard);
        transition: var(--transition-color);
    }
    
    @media (hover: hover) {
        a:not([class]):hover {
            color: #000;
            transition: var(--transition-color);
        }
    }
    
    /* Interaction states */
    a:focus-visible {
        outline: var(--focus-outline-standard);
        outline-offset: 2px;
    }
}


/* --- Embedded timestamps */
.tt-eins .substance-richtext .substance-timestamp {
    display: inline-block;
    vertical-align: bottom;
}


/* --- Bullet lists */
.tt-eins .substance-richtext {
    ul, 
    ol {
        margin-bottom: 0.9em;
    }
    
    ol {
        counter-reset: li;
    }
    
    li {
        padding-left: 15px;
        position: relative;
        margin-bottom: 0.6em;
    }
    
    li:last-child {
        margin-bottom: 0;
    }
    
    li:before {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        top: 0.34em;
        height: 8px;
        width: 8px;
        background: var(--backcolor-bullet);
        border-radius: 50%;
    }
    
    ol li:before {
        content: counter(li);
        counter-increment: li;
        top: -3px;
        left: 0px;
        height: 22px;
        width: 22px;
        border: none;
        font-weight: 700;
        line-height: 22px;
        text-align: center;
        color: #fff;
    }
    
    li p {
        margin-bottom: 0.9em;
    }
}


/* --- Embedded images */
.tt-eins .substance-richtext > img, 
.tt-eins .substance-richtext *:not(.substance-file) img {
    max-width: 100%;
    margin: 0 0 0.4em 0;
}


/* --- Quotations & special boxes */
.tt-eins .substance-richtext blockquote {
    margin: 0 0 1.2em 0;
    padding-left: 20px;
    border-left: 3px solid rgb(213,205,192);

    *:last-child {
        margin-bottom: 0;
    }
    
    &.richtext-scrollpart {
        max-height: 300px; /* TODO: formalize this value */
        overflow: auto;
    }
}


/* --- Last child */
.tt-eins .substance-richtext *:last-child {
    margin-bottom: 0;
}


/* !-------------------------------------------- */
/* !Routes table */
/* !-------------------------------------------- */

.tt-eins .substance-route {
    display: table;
    border-collapse: collapse;
    width: 100%;
    color: var(--textcolor-standard);
    margin: 20px 0 10px 0;
}


/* --- Column titles */
.tt-eins .substance-route .route-title {
    display: table-row;
}

.tt-eins .substance-route .route-title .title-item {
    display: table-cell;
    padding: 0 10px 15px 10px;
    font: var(--textset-plus-s);
}


/* --- Route entry containers */
/* Complete trip incl. all intermediate stations */
.tt-eins .substance-route .route-group {
    display: table-row-group;
    transition: var(--transition-color);
}

@media (hover: hover) {
    .tt-eins .substance-route .route-group:hover {
        background: var(--backcolor-standard);
        transition: var(--transition-color);
    }
}

/* Single leg of a trip */
.tt-eins .substance-route .route-stop {
    display: table-row;
}

.tt-eins .substance-route .route-stop.route-ineligible {
    background: #fff; /* blocks out :hover background on .route-group */
}

.tt-eins .substance-route .route-stop.item-active {
    background: var(--backcolor-selection);
    color: #000;
    transition: var(--transition-color);
}

/* --- Route entry properties */
/* General properties of a single leg */
.tt-eins .substance-route .route-stop .stop-item {
    border-top: var(--line-standard);
    display: table-cell;
    padding: 5px 0 5px 10px;
    vertical-align: middle;
}

.tt-eins .substance-route .route-stop.route-ineligible .stop-item {
    opacity: 0.6;
}
    
.tt-eins .substance-route .route-stop.item-active .stop-item {
    border-color: #fff;
}

.tt-eins .substance-route .route-stop:first-child .stop-item {
    border-top-width: 3px;
}

.tt-eins .substance-route.route-compact .route-stop .stop-helper {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Date/timestamps */
.tt-eins .substance-route .route-stop .stop-item .substance-timestamp {
    display: inline;
    position: static;
    overflow: visible;
}

.tt-eins .substance-route .route-stop .stop-item .substance-timestamp > span {
    font-weight: inherit;
    display: inline;
}

@media (hover: hover) {
    .tt-eins .substance-route .route-stop .stop-item .substance-timestamp {
        cursor: default;
    }
}

/* Station name */
.tt-eins .substance-route .route-stop .stop-station {
    color: var(--textcolor-accent);
}

.tt-eins .substance-route .route-stop .stop-station .substance-entity.entity-trip.trip-aspect-stop {
    padding-top: 0;
}

/* Particular leg properties */
.tt-eins .substance-route .route-stop.item-active .stop-station, 
.tt-eins .substance-route .route-stop.item-active .stop-departure, 
.tt-eins .substance-route .route-stop.item-active .stop-arrival {
    font-weight: bolder;
}

.tt-eins .substance-route .route-stop.item-active .substance-entity.trip-aspect-stop, 
.tt-eins .substance-route .route-stop.item-active .substance-entity.entity-stop, 
.tt-eins .substance-route .route-stop.item-active .substance-entity.entity-vehicle {
    color: #000;
}

.tt-eins .substance-route:not(.route-compact) .route-stop.stop-last .stop-line, 
.tt-eins .substance-route:not(.route-compact) .route-stop.stop-last .stop-helper {
    border-top: none;
}

/* Line title with vehicle icon */
.tt-eins .substance-route .route-stop.stop-last .stop-line {
    font-weight: 700;
}

/* Cell with selection button or dismissal notice */
.tt-eins .substance-route .route-stop.route-ineligible.stop-last .stop-helper {
    font: var(--textset-plus-s);
}

.tt-eins .substance-route .route-stop.stop-last .stop-helper > * {
    margin-right: 0;
}


/* --- Layout for smaller viewports */
/* Tables don't work anymore below a threshold width */
@container route-container (width < 660px) {
    /* Refactor entire table to vertical list */
    .tt-eins .substance-route {
        display: block;
        width: 100%;
        margin: 20px 0 20px 0;
    }

    .tt-eins .substance-route .route-title {
        display: none;
    }

    /* --- Route entry containers */
    .tt-eins .substance-route .route-group {
        display: block;
        margin-bottom: 10px;
    }
    
    @media (hover: hover) {
        .tt-eins .substance-route .route-group:hover {
            background: transparent !important; /* presumably we're running on a touchscreen here anyway */
        }
    }

    .tt-eins .substance-route .route-group + .route-group {
        border-top: 2px solid var(--linecolor-accent);
        padding-top: 10px;
    }
    
    /* Single leg of a trip */
    .tt-eins .substance-route .route-stop {
        display: flex;
        flex-wrap: wrap;
        padding-left: 32px;
        padding-top: 5px;
    }
    
    .tt-eins .substance-route .route-stop + .route-stop {
        border-top: var(--line-standard);
        margin-top: 5px;
        padding-top: 5px;
    }
    
    .tt-eins .substance-route .route-stop + .route-stop.stop-last {
        border-top-style: dashed;
    }
    
    .tt-eins .substance-route .route-stop + .route-stop.stop-last.item-active {
        border-top-style: solid;
        border-top-color: #fff;
        margin-top: 0;
    }
    
    /* --- Route entry properties */
    /* General properties of a single leg */
    .tt-eins .substance-route .route-stop .stop-item {
        display: block;
        border: none;
        padding: 0;
        margin-bottom: 1px;
    }
    
    /* Station name */
    .tt-eins .substance-route .route-stop .stop-station {
        width: calc(100% + 32px);
        margin-left: -32px;
    }
    
    /* Particular leg properties */
    .tt-eins .substance-route .route-stop .stop-date, 
    .tt-eins .substance-route .route-stop .stop-departure, 
    .tt-eins .substance-route .route-stop .stop-arrival, 
    .tt-eins .substance-route .route-stop .stop-track {
        margin-bottom: 2px;
    }

    .tt-eins .substance-route .route-stop .stop-date {
        margin-left: -2px;
    }
    
    .tt-eins .substance-route .route-stop .stop-date:before {
        content: attr(aria-label);
        font-weight: bold;
    }

    .tt-eins .substance-route .route-stop .stop-track:before {
        content: attr(aria-label);
        margin-left: 0.25em;
    }

    .tt-eins .substance-route .route-stop .stop-departure, 
    .tt-eins .substance-route .route-stop .stop-arrival {
        font-weight: bold;
        margin-left: 0.25em;
    }

    /* Line title with vehicle icon */
    .tt-eins .substance-route .route-stop .stop-line {
        width: 100%;
        margin-left: -2px;
    }

    .tt-eins .substance-route .route-stop .stop-line span {
        margin-top: 10px;
    }

    .tt-eins .substance-route .route-stop .stop-line:before {
        content: attr(aria-label);
    }
    
    /* Cell with selection button or dismissal notice */
    .tt-eins .substance-route .route-stop .stop-helper, 
    .tt-eins .substance-route.route-compact .route-stop .stop-helper {
        padding-top: 15px;
        margin-left: -2px;
    }
    
    .tt-eins .substance-route .route-stop .stop-helper .primary-action {
        margin-bottom: 10px;
    }

}

/* --- Layout for phone-sized viewports */
@container route-container (width < 600px) {
    /* --- Route entry containers */
    .tt-eins .substance-route .route-stop + .route-stop {
        padding-bottom: 5px;
    }

    /* --- Route entry properties */
    .tt-eins .substance-route .route-stop .stop-item {
        font: var(--textset-plus-m);
    }

    .tt-eins .substance-route .route-stop .stop-date, 
    .tt-eins .substance-route .route-stop .stop-departure, 
    .tt-eins .substance-route .route-stop .stop-arrival, 
    .tt-eins .substance-route .route-stop .stop-track {
        font: var(--textset-l);
        margin-top: 2px;
    }

    .tt-eins .substance-route.route-compact .route-stop .stop-track:before {
        margin-left: -2px;
    }
    
    /* Line title with vehicle icon */
    .tt-eins .substance-route .route-stop .stop-line {
        font: var(--textset-l);
    }

    /* Cell with selection button or dismissal notice */
    .tt-eins .substance-route .route-stop .stop-helper {
        font: var(--textset-plus-m);
        width: 100%;
    }
    
    .tt-eins .substance-route .route-stop .stop-helper .primary-action {
        width: calc(100% - 10px);
    }
}

/* -------------------------------------------- */
/* Codebox Transity */
/* Version: 185 */
/* -------------------------------------------- */
/* Created by @twotribes, Germany */
/* -------------------------------------------- */
/* StyleSheet Scope: ACTORS for header, footer  & overlays */
/* NOTE: #actor_creator is handled separately in creator.css */
/* -------------------------------------------- */

/* !-------------------------------------------- */
/* !ACTOR: Navigation */
/* !-------------------------------------------- */

/* --- Feature containers */
#actor_navigation {
    display: flex;
}

/* Warning bar for non-PROD server environements */
.stage:is(.environment-dev, .environment-mirror, .environment-qa, .environment-rtp) #actor_navigation:before {
    content: "";
    position: absolute;
    top: 0;
    right: calc(100% + 11px);
    height: 100%;
    width: 400px;
    background: var(--gradient-internal-hatched);
    background-size: 11px 11px;
}

/* Precise marker for server environment */
.stage:is(.environment-dev, .environment-mirror, .environment-qa, .environment-rtp) #actor_navigation:after {
    content: "";
    position: absolute;
    top: 0;
    right: calc(100% + 52px);
    width: auto;
    padding-top: 19px;
    text-align: right;
    font: var(--textset-plus-s);
    font-weight: 800;
    letter-spacing: 0.07em;
    line-height: 1;
    color: #fff;
    text-shadow: 0 0 10px var(--transity-base);
}

.stage.environment-dev #actor_navigation:after {
    content: "DEV";
}

.stage.environment-mirror #actor_navigation:after {
    content: "MIRROR";
}

.stage.environment-qa #actor_navigation:after {
    content: "QA";
}

.stage.environment-rtp #actor_navigation:after {
    content: "RTP";
}

/* Major group containers */
#actor_navigation .navigation-product {
    margin-right: 20px;
}

#actor_navigation .navigation-section {
    margin-right: auto;
}

/* Cross-feature containers */
#actor_navigation .navigation-search, 
#actor_navigation .navigation-notification, 
#actor_navigation .navigation-user {
    position: relative;
    height: 50px;
    border-left: 1px solid var(--linecolor-dark);
    border-left-color: rgba(255,255,255,0.3);
    transition: var(--transition-color);
}

#actor_navigation .navigation-user {
    order: 10;
}

#actor_navigation .navigation-search {
    order: 9;
}

#actor_navigation .navigation-notification {
    order: 8;
    border-left: none;
}

/* Hover highlighting of usable features */
@media (hover: hover) {
    #actor_navigation .navigation-product:hover, 
    #actor_navigation .navigation-section .cell:hover, 
    #actor_navigation .navigation-notification:not(.notification-zero):hover, 
    #actor_navigation .navigation-search:hover, 
    #actor_navigation .navigation-user:hover {
        background-color: var(--transity-sand-70-x);
        transition: var(--transition-color);
    }
}

/* Highlight current section (all features with data-navkey are eligible) */
#actor_navigation *[data-navkey]:not(.item-active) {
    border-bottom-color: transparent; /* init value for transition */
}

#actor_navigation *[data-navkey].item-active {
    border-bottom: 6px solid #fff;
}

#actor_navigation *[data-navkey].item-active .menu-action {
    font-weight: 800;
}


/* --- Application family + product logo */
/* Family logo */
#actor_navigation .navigation-product {
    font: var(--textset-m);
    width: 160px;
    height: 100%;
    margin-left: -10px;
    background: transparent url(../../static/media/TEMP_logo_transity.780c06c1a96cbbac6703.svg) center no-repeat;
    transition: var(--transition-color);
}

.stage.brand-rms #actor_navigation .navigation-product {
    background-image: url(../../static/media/logo_rms_solutions_white.f2ce28b52d6cf262e58b.svg);
    background-size: 105px;
    width: 180px;
}

/* Product logo */
.stage.brand-rms:is(.rms-admin, .rms-am, .rms-km, .rms-pm) #actor_navigation .navigation-product {
    background-position: 22px center;
}

.stage.brand-rms:is(.rms-admin, .rms-am, .rms-km, .rms-pm) #actor_navigation .navigation-product:after {
    content: "";
    position: absolute;
    left: 138px;
    top: 12px;
    width: 24px;
    height: 24px;
    background: transparent center no-repeat;
    background-size: 100%;
    pointer-events: none;
}

.stage.brand-rms.rms-admin #actor_navigation .navigation-product:after {
    background-image: url(../../static/media/logo_rms_admin_white.2a09905190d9d9232f41.svg);
}
.stage.brand-rms.rms-am #actor_navigation .navigation-product:after {
    background-image: url(../../static/media/logo_rms_AM_white.3eac9e4d5fe37e7e0675.svg);
}
.stage.brand-rms.rms-km #actor_navigation .navigation-product:after {
    background-image: url(../../static/media/logo_rms_KM_white.e0eede0d56be56724dd9.svg);
}
.stage.brand-rms.rms-pm #actor_navigation .navigation-product:after {
    background-image: url(../../static/media/logo_rms_PM_white.786371e9b5a2ca73759e.svg);
}

/* Make the button invisible but keep it clickable */
#actor_navigation .navigation-product .substance-flyout {
    height: 100%;
    width: 100%;
}

#actor_navigation .navigation-product .flyout-controller {
    height: 100%;
    width: 100%;
    color: transparent;
}

#actor_navigation .navigation-product .flyout-controller:focus-visible {
    outline: var(--focus-outline-inverse);
    outline-offset: -5px;
}

/* Icon for server environment */
.stage:is(.environment-dev, .environment-mirror, .environment-qa, .environment-rtp) #actor_navigation .navigation-product .flyout-controller:after {
    content: "";
    position: absolute;
    top: 11px;
    right: calc(100% + 8px);
    width: 26px;
    height: 26px;
    background: transparent center no-repeat;
    background-size: 26px;
}

.stage.environment-dev #actor_navigation .navigation-product .flyout-controller:after, 
.stage.environment-rtp #actor_navigation .navigation-product .flyout-controller:after {
    background-image: url(../../static/media/icon_validation_crisis.5697c91c77019e1bae21.svg);
}

.stage.environment-mirror #actor_navigation .navigation-product .flyout-controller:after {
    background-image: url(../../static/media/icon_validation_warning.eff586cc341c8b81d587.svg);
}

.stage.environment-qa #actor_navigation .navigation-product .flyout-controller:after {
    background-image: url(../../static/media/icon_validation_ok.5ad815141651a003dd58.svg);
}


/* --- Section menu */
#actor_navigation .navigation-section {
    > ul {
        display: flex;
    }
    
    .cell {
        border-left: 1px solid var(--linecolor-dark);
        border-left-color: rgba(255,255,255,0.3);
        height: 50px;
        transition: var(--transition-color);
    }
    
    .cell:first-child {
        border-left: none;
    }
    
    .menu-action {
        padding: 0 15px 0 15px;
        line-height: 50px;
    }
    
    /* Menu with flyout */
    .menu-action.view-action {
        padding-right: 30px;
    }
    
    .menu-action.view-action:after {
        top: 50%;
        right: 15px;
        margin-top: -7px;
    }
    
    /* Creator entry */
    #section_create {
        border-left: none;
        margin-top: 7px;
        height: 35px;
        margin-left: 15px;
    
        .menu-action {
            position: relative;
            padding-left: 36px;
            border: 1px solid #fff;
            border-radius: var(--radius-interaction);
            height: 35px;
            line-height: 35px;
        }
        
        .menu-action:before {
            content: "+";
            font: var(--textset-xxl);
            font-weight: 700;
            line-height: 35px;
            display: block;
            position: absolute;
            top: -1px;
            left: 15px;
        }
        
        /* Create entry with flyout (for several creators to choose from) */
        .menu-action.view-action {
            background: transparent;
        }
        
        .menu-action.view-action:after {
            right: 13px;
            margin-top: -6px;
        }
        
        &.substance-flyout .flyout-host {
            margin-top: 16px;
        }
        
        &.substance-flyout.flyout-active:before {
            bottom: -24px;
        }
    }
}


/* --- Global search */
#actor_navigation .navigation-search {
    .flyout-controller.entity-search {
        overflow: visible;
        padding: 4px 20px 0 20px;
        width: 44px;
        height: 50px;
    }
    
    .flyout-controller.entity-search:focus-visible {
        outline: var(--focus-outline-inverse);
        outline-offset: -5px;
    }
    
    /* Icon */
    .substance-entity.entity-search.entity-icon {
        @media (hover: hover) {
            cursor: pointer;
        }
    }

    .flyout-controller.entity-search:before {
        content: "";
        line-height: 20px;
        height: 100%;
        width: 22px;
        left: 9px;
        top: 12px;
        background-image: url(../../static/media/icon_navigation_search.e233f9d34d86527f4141.svg);
    }
}


/* --- Notifications */
/* Icon with message counter */
#actor_navigation .navigation-notification {
    .flyout-controller.entity-notification {
        overflow: visible;
        padding: 4px 20px 0 20px;
        width: 64px;
        height: 50px;
    }
    
    .flyout-controller.entity-notification:focus-visible {
        outline: var(--focus-outline-inverse);
        outline-offset: -5px;
    }

    .flyout-controller.entity-notification:before {
        left: 19px;
        top: 8px;
    }
    
    .substance-counter {
        position: absolute;
        top: 4px;
        left: 33px;
    }
    
    /* Icon */
    .substance-entity.entity-notification.entity-icon {
        @media (hover: hover) {
            cursor: pointer;
        }
    }

    .substance-entity.entity-notification.entity-icon:before {
        content: "";
        width: 24px;
        height: 32px;
        background-image: url(../../static/media/icon_navigation_notification.c3368a4fb28649b54c88.svg);
        background-position: center 6px;
    }
    
    .substance-entity.entity-notification.entity-icon:after {
        display: none; /* DEPRECATED: can be removed after TE-5922 has been resolved. */
    }
}


/* --- Current user */
#actor_navigation .navigation-user {
    padding-right: 15px;
    margin-right: -15px;

    .substance-flyout {
        padding: 13px 15px 10px 15px;
        margin-right: -15px;
    }
    
    .flyout-controller.entity-user {
        padding-right: 0;
        padding-left: 34px;
        height: 26px;
        top: -4px;
    }
    
    .flyout-controller.entity-user:before {
        height: 26px;
        width: 26px;
        background-size: 26px;
        top: -1px;
    }
    
    .flyout-controller.entity-user:after {
        display: none;
    }
    
    /* Interaction states */
    @media (hover: hover) {
        .flyout-controller.entity-user:hover {
            color: #fff;
        }
    }
    
    .flyout-controller.entity-user:focus-visible {
        outline: var(--focus-outline-inverse);
        outline-offset: 5px;
    }
    
    /* Name of current user */
    .flyout-controller.entity-user .user-name {
        line-height: 13px;
        display: block;
        white-space: nowrap;
    }
}


/* !-------------------------------------------- */
/* !ACTOR: Navigation */
/* !SUB-COMPONENTS: Flyouts */
/* !-------------------------------------------- */

/* --- General navigation flyouts */
#actor_navigation .flyout-host {
    max-height: calc(100dvh - var(--main-navigation-height) - 20px); /* 20px accommodate flyout offset to main navigation bar + some drop shadow */
    overflow: auto;
}


/* --- Product info flyout */
#actor_navigation .navigation-product .flyout-host {
    left: 0;
    transform: none;
    width: var(--flyout-width-standard);
    
    /* Client logo */
    .product-client {
        margin-bottom: 15px;
    }
    
    .product-client img {
        display: inline-block;
        height: 40px;
    }
    
    /* Product data */
    .info-product .product-title {
        color: var(--textcolor-accent);
        font-weight: 500;
        margin-bottom: 15px;
    }
    
    .info-product .product-title em:after {
        content: " ";
    }
    
    .info-product .product-version:not(:last-child) {
        margin-bottom: 5px;
    }
    
    /* Support information */
    .info-support .support-title {
        color: var(--textcolor-accent);
        font-weight: 700;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        margin-bottom: 15px;
    }
    
    .info-support em {
        color: var(--textcolor-accent);
    }
    
    .info-support .email-action {
        display: inline-block;
        margin-left: 3px;
    }
    
    /* Software vendor */
    .info-vendor {
        background-color: #fff;
        padding-top: 20px;
    }
    
    .info-vendor p {
        color: var(--textcolor-standard);
        font: var(--textset-plus-s);
        font-weight: 400;
    }
    
    .info-vendor .vendor-title {
        margin-bottom: 0;
    }
    
    .info-vendor p .link-action {
        color: #000;
        font-weight: 500;
        transition: var(--transition-color);
    }
    
    @media (hover: hover) {
        .info-vendor p .link-action:hover {
            color: var(--textcolor-accent);
            transition: var(--transition-color);
        }
    }
}


/* --- General navigation flyouts */
#actor_navigation .navigation-section .flyout-host {
    width: var(--flyout-width-standard);
}


/* --- Notification flyout */
#actor_navigation .navigation-notification .flyout-host {
    /* Flyout container */
    left: auto;
    right: 0;
    transform: none;
    width: var(--flyout-width-standard);
    
    /* Subheads */
    h3 {
        color: var(--textcolor-accent);
        margin-top: 30px;
        text-transform: uppercase;
        padding: 0 15px 0 15px;
        font: var(--textset-m);
        font-weight: 700;
        letter-spacing: 0.5px;
    }
    
    h3:first-child {
        margin-top: 0;
    }
    
    /* Message lists + containers */
    .notification-list {
        background: var(--backcolor-standard);
        margin-top: 10px;
    }
    
    .notification-list.list-older {
        background: none;
        margin-top: 0;
    }
    
    .substance-message {
        padding: 15px 15px 15px 15px;
        background: none;
        border-bottom: 2px solid #fff;
    }
    
    .notification-list.list-older .substance-message {
        border-bottom-color: var(--linecolor-standard);
    }
    
    .substance-message:last-child {
        border-bottom: none;
    }
    
    /* Edge case: no messages at all */
    &:not(:has(h3)) .notification-list.list-older .substance-message:only-child {
        padding-top: 0;
        padding-bottom: 0;
    }
}


/* --- Flyout for global ID search */
#actor_navigation .navigation-search .flyout-host {
    left: auto;
    right: 0;
    transform: none;
    
    &:has(.flyout-controller.entity-validation.flyout-active) {
        overflow: visible;
    }

    .menu-section {
        transition: var(--transition-width);
    }
    
    &.host-size-mega .menu-section:first-child {
        width: var(--flyout-width-standard);
    }
    
    &.host-size-mega .menu-section:nth-child(2) {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        
        .substance-table {
            width: 100%;
        }
    }
}


/* --- Flyout with account info for current user */
#actor_navigation .navigation-user .flyout-host {
    width: var(--flyout-width-standard);
    left: auto;
    right: 0;
    transform: none;
    
    /* Expandable password section */
    .primary-action.action-save {
        margin-top: 10px;
    }
    
    .primary-action:not(.action-size-mini) {
        padding-top: inherit;
        padding-bottom: inherit;
    }
}


/* !-------------------------------------------- */
/* !ACTOR: Header */
/* !-------------------------------------------- */

/* --- Header containers */
#actor_header {
    display: flex;
    align-items: center;
}

/* Client logo */
#actor_header .header-client {
    height: 100%;
    width: 140px; /* in relation to product logo in #actor_navigation */
    margin: 0 calc(var(--sidebar-static-width) - 148px) 0 0;
    padding: 10px 0 10px 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-shrink: 0;
}

.stage-objectview #actor_header .header-client {
    margin-right: calc(var(--sidebar-width) - 148px + 22px);
}

.stage-objectview:has(#actor_list.expression-collapsed) #actor_header .header-client, 
.stage-objectview:not(:has(#actor_list)) #actor_header .header-client {
    margin-right: calc(var(--sidebar-missing-width) - 148px + 22px);
}

/* Page headline */
#actor_header .header-page {
    margin-right: 20px;
}

/* ListView: record counter */
#actor_header .header-counter {
}

/* ListView/ObjectView: list actions or issue date */
#actor_header .header-actions, 
#actor_header .header-attributes {
    margin-left: auto;
}


/* --- Client logo */
#actor_header .header-client {
    img {
        display: inline-block;
        height: 100%;
        /* width: 100%; would be default */
        /* min-height: 100%; fix for Safari when using object-fit: contain */
        -o-object-fit: contain;
           object-fit: contain;
        
        /* De-init for known client logos */
        width: auto;
        min-height: 0;
    }
    
    /* PROTOTYPE ONLY: Client logo two tribes */
    img#logo_tt {
        height: 41px;
    }
}


/* --- Page headlines */
#actor_header .header-page {
    color: var(--textcolor-accent);
    flex-shrink: 1;
    --max-page-descript-width: calc(0.72 * (var(--site-width) - var(--sidebar-width)) - 78px); /* Middle column of #actor_incident */

    /* Page title */
    .page-topic {
        font: var(--textset-xxl);
        white-space: nowrap;
        max-width: var(--max-page-descript-width);
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .page-topic em {
        font-weight: 500;
    }
    
    .page-topic .substance-id {
        font-size: inherit;
        font-weight: inherit;
    }
    
    .page-topic .substance-id .id-prefix {
        font: var(--textset-xxl);
    }
    
    /* Page description */
    .page-description {
        font: var(--textset-plus-m);
        margin: 2px 0 0 1px;
        white-space: nowrap;
        max-width: var(--max-page-descript-width);
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .page-description .substance-id {
        font-size: inherit;
        position: static;
    }
    
    .page-description .substance-id .id-prefix {
        font: var(--textset-plus-m);
    }
    
    /* Embedded scroll links */
    .page-description .link-action {
        text-decoration: underline;
    }
    
    /* Interaction states */
    .page-description:has(.link-action:focus-visible) {
        overflow: visible;
    }
    
    .page-description .link-action:focus-visible {
        outline: var(--focus-outline-accent);
    }
}


/* --- List counters, selection tools */
#actor_header .header-counter {
    display: flex;
    -moz-column-gap: 10px;
         column-gap: 10px;
    align-items: center;
    flex-shrink: 0;

    .substance-entity.entity-validation + .flyout-host {
        width: var(--flyout-width-standard);
    }
}


/* --- Page actions */
#actor_header .header-actions {
    -moz-column-gap: 20px;
         column-gap: 20px;
    flex-shrink: 0;

    .toolchain-link .flyout-host {
        width: var(--flyout-width-standard);
        left: auto;
        right: 0;
        transform: none;
    }
    
    .toolchain-link .flyout-host.host-size-medium {
        width: var(--flyout-width-medium);
    }
    
    /* Nested combobox flyouts */
    .toolchain-link .flyout-compact .flyout-host {
        width: calc(100% - (2 * 15px));
        left: auto;
        left: initial;
        right: auto;
    }
}


/* --- Additional page attributes */
#actor_header .header-attributes {
    font: var(--textset-l);
    color: var(--textcolor-accent);
    flex-shrink: 0;
    text-align: right;
    
    /* Short, alphanumeric datestamps */
    .timestamp-date {
        font-weight: 700;
    }
    
    /* Double timestamps */
    &:has(.substance-timestamp + .substance-timestamp) .substance-timestamp:first-child {
        font: var(--textset-xxl);
    }

    &:has(.substance-timestamp + .substance-timestamp) .substance-timestamp:last-child {
        font: var(--textset-plus-m);
    }
}

/* --- Flyouts originating in this actor */
#actor_header .flyout-host {
    max-height: calc(100dvh - var(--main-navigation-height) - var(--main-header-height) - 10px); /* 10px accommodate flyout inset into page-header + some drop shadow */
    overflow: auto;
}


/* !-------------------------------------------- */
/* !ACTOR: Image viewer (Overlay window) */
/* !-------------------------------------------- */

#actor_viewer {
    background: #fff;
    padding: 20px;    
}

/* --- Viewer controls */
#actor_viewer .viewer-controller {
    margin-bottom: 20px;

    .primary-action {
        display: block;
    }
    
    .primary-action.action-back, 
    .primary-action.action-forward {
        height: 40px;
        width: 80px;
    }
    
    .primary-action.action-back:before, 
    .primary-action.action-forward:before {
        background-size: 100%;
    }
    
    .action-close {
        margin-left: auto;
    }
}

/* --- Image container */
#actor_viewer .substance-file {
    height: calc(100% - 60px);
    display: flex;
    flex-direction: column;

    /* Optional state message */
    .substance-message {
        left: 50%;
        transform: translateX(-50%);
        top: -60px;
    }
    
    /* Actual image */
    .file-thumbnail {
        flex-grow: 1;
        height: -moz-max-content;
        height: max-content;
    }
    
    /* Image toolbars */
    .substance-toolchain {
        border-top: none;
        background-color: transparent;
        padding: 0;
        margin-top: 8px;
    }
    
    &.image-cropping .toolchain-crop .toolchain-link:has(input[type="range"]) {
        width: 50%;
    }
    
    .substance-toolchain .toolchain-link:has(.substance-protector) {
        min-height: var(--button-height-mini);
    }
    
    .substance-toolchain .substance-protector .protector-title {
        width: -moz-max-content;
        width: max-content;
    }
    
    .substance-toolchain .substance-protector.protector-type-floating .protector-flyout {
        left: auto;
        transform: none;
        bottom: calc(-1 * var(--button-height-mini));
        right: 0;
    }
}


/* !-------------------------------------------- */
/* !ACTOR: Payment processor (Overlay window) */
/* !-------------------------------------------- */

#actor_pay {
    background: #fff;
    padding: 96px 20px 100px 20px;    
}


/* --- Headline */
#actor_pay .pay-head {
    position: absolute;
    top: 0;
    left: 0;
    height: 76px;
    width: 100%;
    font: var(--textset-xl);
    color: var(--textcolor-accent);
    padding: 20px;
    border-bottom: var(--line-standard-thick);
    
    h2 {
        font-weight: 200;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: calc(100% - 40px);
    }
}


/* --- Scrollable payment configuration process */
#actor_pay .pay-configuration {
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* --- Exit options */
#actor_pay .pay-action {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 80px;
    width: 100%;
    padding: 20px;
    background: var(--backcolor-standard);

    .toolchain-link {
        margin-right: 0;
        vertical-align: middle;
    }
    
    /* Cancel button */
    .toolchain-link.action-cancel {
        width: 30%;
        position: relative;
    }
    
    /* Confirm button */
    .toolchain-link.action-primary {
        width: 40%;
    }
    
    .toolchain-link.action-primary:only-child {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    
    .toolchain-link.action-primary .primary-action {
        display: block;
        width: 100%;
    }
}


/* -------------------------------------------- */
/* Codebox Transity */
/* Version: 91 */
/* -------------------------------------------- */
/* Created by @twotribes, Germany */
/* -------------------------------------------- */
/* StyleSheet Scope: CREATOR APP */
/* -------------------------------------------- */

/* !-------------------------------------------- */
/* !General container */
/* !-------------------------------------------- */

#actor_creator {
    background: #fff;
    padding: 0 var(--overlay-padding) 0 var(--overlay-padding);
    container-name: route-container layout-container;
    container-type: inline-size;
    
    /* Block dimensions */
    --overlay-padding: 20px;
    --block-gutter: 20px;
    --block-inset: 20px;
    
    /* Block headlines */
    --head-inset: 10px;
    --validation-marker-size: 20px;
    --validation-summary-empty: "…";
    --validation-separator: " – ";

    /* Fieldlist dimensions */
    --fieldlist-row-gutter: 20px;
    --fieldlist-row-gutter-extended: 25px;
    --fieldlist-column-gutter: 30px;
    --fieldlist-segment-inset: 10px;
    
    /* Summary dimensions */
    --summary-row-gutter: 10px;
    --summary-keycol-width: 30%;
    --summary-valuecol-width: 70%;

    /* Scrolling offset for sticky header (neutral initalization for client skins) */
    /* THIS VALUE HAS TO BE NEGATIVE TO BECOME EFFECTIVE */
    --floating-header-height: 0px;
}


/* !-------------------------------------------- */
/* !Creator layout: major containers */
/* !-------------------------------------------- */

/* --- Vertical container arrangement */
#actor_creator .creator-wrapper,
#actor_creator:not(:has(> .creator-wrapper)) {
    height: 100%;
    display: flex;
    flex-direction: column;
}

#actor_creator {
    .creator-head {
        flex-grow: 0;
        flex-shrink: 0;
    }
    
    .creator-form {
        flex-grow: 1;
        margin-bottom: auto;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }
    
    .creator-action {
        flex-grow: 0;
        flex-shrink: 0;
    }
}


/* --- Scrollable multi-block form */
/* Form blocks */
#actor_creator .form-block.item-active {
    margin-bottom: var(--block-gutter);
}

@container layout-container (width < 680px) {
    #actor_creator .form-block {
        margin-bottom: var(--block-gutter);
    }
}

/* Internal-only form blocks */
#actor_creator.expression-internal {
    .form-block.item-active {
        border: var(--line-signature-active);
        padding-bottom: 20px;
    }
    
    .form-block.block-placeholder {
        margin: var(--block-gutter) 0 var(--block-gutter) 0;
        display: flex;
        -moz-column-gap: var(--fieldlist-row-gutter);
             column-gap: var(--fieldlist-row-gutter);
    }
}


/* !-------------------------------------------- */
/* !Header (only used for internal Creators) */
/* !-------------------------------------------- */

/* --- Header container */
#actor_creator {
    .creator-head {
        position: relative;
        margin: 0 calc(-1 * var(--overlay-padding)) var(--block-gutter) calc(-1 * var(--overlay-padding));
        width: calc(100% + (2 * var(--overlay-padding)));
        padding: var(--block-inset);
        border-bottom: var(--line-standard-thick);
    }
    
    /* Slightly different design + entity type icon for modern internal Creators */
    &.expression-internal .creator-head {
        padding-left: calc(var(--block-inset) + 48px);
        background-color: var(--backcolor-standard);
        background-image: var(--gradient-nav-header);
        border-bottom: none;
    }
    
    &.expression-internal .creator-head:before {
        content: "";
        position: absolute;
        display: block;
        left: var(--overlay-padding);
        top: 50%;
        margin-top: -20px;
        width: 40px;
        height: 40px;
        background: transparent center url(../../static/media/icon_complaint_operations.2f80271b9979a3f3640d.svg) no-repeat;
        background-size: contain;
    }
}


/* --- Headline */
#actor_creator .creator-head {
    h2 {
        font: var(--textset-xxl);
        color: var(--textcolor-accent);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    
    /* Internal only: close button for Creator overlay */
    /* Only used on receipt page of old-school internal Creators */
    &:has(.primary-action) h2 {
        max-width: calc(100% - 40px); /* leave space for optinal Close button */
    }
    
    .primary-action {
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
    }
}


/* !-------------------------------------------- */
/* !Block controllers */
/* !-------------------------------------------- */
    
/* --- Expander/Collapser component */
#actor_creator .form-block .block-controller {
    position: relative;
    width: 100%;
    padding: var(--head-inset) 0 var(--head-inset) 0;
    margin-bottom: calc(var(--fieldlist-row-gutter) / 2);
    border-bottom: var(--line-standard-thick);
}

#actor_creator.expression-internal .form-block {
    .block-controller {
        display: flex;
        -moz-column-gap: 15px;
             column-gap: 15px;
        background: #fff;
        padding-bottom: 5px;
        border-bottom: var(--line-signature);
    }
    
    &.item-active .block-controller {
        border-bottom: var(--line-signature-active);
        margin-left: calc(-1 * var(--line-signature-width));
        margin-right: calc(-1 * var(--line-signature-width));
        margin-top: calc(-1 * var(--line-signature-width));
        width: calc(100% + calc(2 * var(--line-signature-width)));
    }
}

/* Arrow positioning for multi-line block headlines incl. summary */
#actor_creator.expression-internal .form-block.block-validated .expand-action:before {
    top: 3px;
    margin-top: 0;
}

@container layout-container (width < 800px) {
    #actor_creator .form-block .expand-action:before {
        top: 3px;
        margin-top: 0;
    }
}

/* Title of block */
#actor_creator .form-block h3 {
    font: var(--textset-minus-l);
    overflow: hidden;
    text-overflow: ellipsis;

    .substance-id {
        font-size: inherit;
        font-weight: inherit;
    }
    
    .substance-id .id-prefix {
        font: var(--textset-minus-l);
    }
    
    .substance-id .id-suffix.suffix-point {
        color: var(--textcolor-standard);
        margin-right: 4px;
    }
}

@container layout-container (width < 680px) {
    #actor_creator .form-block .expand-action {
        white-space: normal;
    }
    
    #actor_creator .form-block h3 {
        font: var(--textset-l);
    }
}


/* --- Inaccessible form blocks */
#actor_creator .form-block.item-block .block-controller {
    opacity: 0.6;
}

@media (hover: hover) {
    #actor_creator .form-block.item-block .block-controller .expand-action:hover {
        color: var(--textcolor-accent);
        cursor: not-allowed;
    }
}


/* --- Summary of submitted form block content */
#actor_creator .form-block {
    .block-controller .controller-summary {
        font-weight: 200;
        margin-left: 0.2em;
    }
    
    .block-controller .controller-summary:empty:after {
        content: var(--validation-summary-empty);
    }
    
    /* Validated block: compiled content */
    &.block-validated .block-controller .controller-summary {
        margin-left: 0;
    }
    
    &.block-validated .block-controller .controller-summary:before {
        content: var(--validation-separator);
    }
    
    @container layout-container (width < 800px) {
        &.block-validated .block-controller .controller-summary {
            display: block;
            white-space: normal;
            margin-top: 5px;
        }
        
        &.block-validated .block-controller .controller-summary:before {
            content: "";
        }
    }
}

/* Internal Creators always show summaries at full length */
#actor_creator.expression-internal .form-block.block-validated .block-controller {
    .controller-summary {
        display: block;
        white-space: normal;
        margin-top: 3px;
    }
    
    .controller-summary:before {
        content: "";
    }
}


/* --- Validation result */
#actor_creator .form-block.block-validated {
    .block-controller {
        padding-right: calc(2 * var(--validation-marker-size));
    }
    
    .block-controller:after {
        content: "";
        display: none;
        position: absolute;
        right: 0;
        top: 50%;
        margin-top: calc(-1 * var(--validation-marker-size) / 2);
        width: var(--validation-marker-size);
        height: var(--validation-marker-size);
        background: transparent center no-repeat;
        background-size: var(--validation-marker-size);
    }
    
    @container layout-container (width < 800px) {
        .block-controller:after {
            top: var(--head-inset);
            margin-top: 0;
        }
    }
    
    .block-controller:after, 
    &.validated-ok .block-controller:after {
        display: block;
        background-image: url(../../static/media/icon_validation_ok.5ad815141651a003dd58.svg);
    }
    
    &.validated-warn .block-controller:after {
        display: block;
        background-image: url(../../static/media/icon_validation_warning.eff586cc341c8b81d587.svg);
    }
    
    &.validated-crisis .block-controller:after {
        display: block;
        background-image: url(../../static/media/icon_validation_crisis.5697c91c77019e1bae21.svg);
    }
}

/* Internal Creators always show summaries across multiple lines */
#actor_creator.expression-internal .form-block.block-validated .block-controller:after {
    top: var(--head-inset);
    margin-top: 0;
}

/* Invisible validation results for screenreaders only */
#actor_creator .form-block .block-controller .controller-summary .summary-hiddenresult {
    position: absolute;
    left: -10000px;
    top: 0;
    width: 1px;
    height: 1px;
}

#actor_creator .form-block .block-controller .controller-summary:has(.summary-hiddenresult:only-child):before {
    content: "";
}


/* !-------------------------------------------- */
/* !Form content */
/* !-------------------------------------------- */

/* --- Display form only when form block is active */
#actor_creator .form-block .block-controller ~ * {
    display: none;
    margin-left: var(--block-inset);
    margin-right: var(--block-inset);
}

#actor_creator .form-block.item-active .block-controller ~ * {
    display: block;
}

@container layout-container (width < 680px) {
    #actor_creator .form-block .block-controller ~ * {
        margin-left: 0;
        margin-right: 0;
    }
}


/* --- Inline messages */
#actor_creator .form-block .substance-message {
    margin: 0 0 var(--fieldlist-row-gutter) 0;
}

#actor_creator .form-block .primary-action + .substance-message {
    margin-top: var(--fieldlist-row-gutter);
}

@container layout-container (width < 680px) {
    #actor_creator .form-block .substance-message {
        font: var(--textset-plus-m);
        margin-bottom: var(--fieldlist-row-gutter-extended);
    }
}

/* Internal only: scrollable info-level messages */
#actor_creator.expression-internal .form-block .substance-message.message-level-info {
    background: none;
    border-bottom: var(--line-standard);
    
    blockquote {
        max-height: 25dvh;
        overflow: auto;
    }
}


/* --- Field lists: grand containers */
#actor_creator .form-block .substance-fieldlist:empty {
    display: none;
}

#actor_creator .form-block .substance-fieldlist > ul {
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--fieldlist-row-gutter);
    -moz-column-gap: var(--fieldlist-column-gutter);
         column-gap: var(--fieldlist-column-gutter);
}

/* Multiple field lists within same form block */
#actor_creator .form-block .substance-fieldlist + .substance-fieldlist, 
#actor_creator .form-block .block-property + .substance-fieldlist {
    margin-top: var(--fieldlist-row-gutter);
    border-top: var(--line-standard);
    padding-top: var(--fieldlist-row-gutter);
}

@container layout-container (width < 680px) {
    #actor_creator .form-block .substance-fieldlist > ul {
        row-gap: var(--fieldlist-row-gutter-extended);
    }
}


/* --- Field lists: field entries */
#actor_creator .form-block .substance-fieldlist {
    .field-entry {
        width: 100%;
    }
    
    /* Special fields: shorter date and time fields */
    /* This is automatically pairing date/time combos on the same row for desktop layouts */
    .field-entry:has(:is(input[type="date"], input[type="time"])) {
        width: calc(50% - var(--fieldlist-column-gutter) / 2);
    
        @container layout-container (width < 680px) {
            width: 100%;
        }
    }
    
    /* Special fields: Side-by-side fields - <select> fields in the optional route table filters */
    .fieldlist-segment.segment-optional .field-entry.entry-select + .field-entry.entry-select, 
    .fieldlist-segment.segment-optional .field-entry.entry-select:has(+ .field-entry.entry-select) {
        width: calc(50% - var(--fieldlist-column-gutter) / 2);
    
        @container layout-container (width < 680px) {
            width: 100%;
        }
    }
    
    /* Special fields: labels for stations with icons */
    .entry-stop .field-container {
        padding-top: calc(var(--field-height-label) + 4px);
    }
    
    /* Special fields: numeric fields */
    .field-entry input[type="number"] {
        width: 100%;
    }
    
    /* Special fields: field-related input suggestions */
    @container layout-container (width < 680px) {
        .field-entry.substance-flyout.flyout-compact .flyout-host.substance-menu {
            font: var(--textset-plus-m);
        }
    
        .field-entry.substance-flyout.flyout-compact .flyout-host.substance-menu .link-action {
            padding-top: 10px;
            padding-bottom: 10px;
        }
    }
}

/* --- Internal only: Visual image croppers */
#actor_creator.expression-internal .form-block .substance-fieldlist .substance-file.image-cropping .substance-toolchain {
    .toolchain-link:has(input[type="range"]) {
        min-height: 31px; /* matches neighboring button */
        margin-left: 0;
        width: 50%;
    }
}


/* --- Field lists: buttons */
#actor_creator .form-block .substance-fieldlist {
    > .primary-action {
        margin-top: var(--fieldlist-row-gutter);
    }
    
    > .primary-action.action-size-mini {
        margin-top: 0;
        font-weight: 700;
        display: block;
    }
    
    @container layout-container (width < 680px) {
        > .primary-action {
            width: 100%;
        }
    }
}


/* --- Field lists: collapsible segments */
#actor_creator .form-block .substance-fieldlist {
    .fieldlist-segment + .fieldlist-segment {
        margin-top: var(--fieldlist-row-gutter);
    }
    
    .fieldlist-segment.segment-optional {
        padding: var(--fieldlist-segment-inset);
        border: 1px solid var(--linecolor-medium);
    }
    
    .primary-action + .fieldlist-segment.segment-optional {
        margin-top: var(--fieldlist-row-gutter);
    }
    
    /* Expander/Collapser button */
    .fieldlist-segment.segment-optional:not(.item-active) .expand-action:before {
        transform: rotateZ(90deg); /* DEPRECATED: override needed because this is a nested expander button, remove when TB-1299 is done */
    }
    
    /* Showing/hiding controlled field entries */
    .fieldlist-segment.segment-optional:not(.item-active) .field-entry {
        display: none;
    }
    
    .fieldlist-segment.segment-optional:not(.item-active) .field-entry:first-child {
        display: block;
        margin-bottom: 0;
    }
    
    .fieldlist-segment.segment-optional.item-active .field-entry {
        display: block;
    }
}


/* !-------------------------------------------- */
/* !Summary of entered form values */
/* !-------------------------------------------- */

/* --- Internal only: grouped complaint points */
#actor_creator.expression-internal .form-block {
    .block-group {
        margin: var(--summary-row-gutter) var(--block-inset) var(--summary-row-gutter) var(--block-inset);
        padding: var(--fieldlist-segment-inset) 0 var(--fieldlist-segment-inset) 0;
        border-top: var(--line-standard);
        border-bottom: var(--line-standard);
    }
    
    &:not(.item-active) .block-group {
        display: none;
    }
    
    .block-group h4 {
        color: var(--textcolor-accent);
        margin: 0 0 var(--summary-row-gutter) 0;
        text-transform: uppercase;
        font-weight: 700;
        letter-spacing: 0.5px;
    }
    
    .block-group h4:not(:first-child) {
        margin-top: var(--fieldlist-row-gutter);
    }
}


/* --- Layout arrangement */
/* Key/value pairs */
#actor_creator .form-block .block-property {
    margin-top: var(--summary-row-gutter);

    &.property-incident {
        background: var(--backcolor-standard);
        padding: var(--block-inset);
    }
    
    .property-item:not(:last-child) {
        margin-bottom: var(--fieldlist-row-gutter);
    }
    
    @container layout-container (width < 680px) {
        .property-item:not(:last-child) {
            margin-bottom: var(--fieldlist-row-gutter-extended);
        }
    }
    
    /* Column layout for wide viewports */
    .property-item {
        display: grid;
        grid-template-columns: var(--summary-keycol-width) calc(var(--summary-valuecol-width) - var(--fieldlist-column-gutter));
        grid-column-gap: var(--fieldlist-column-gutter);
        -moz-column-gap: var(--fieldlist-column-gutter);
             column-gap: var(--fieldlist-column-gutter);
    }
    
    .property-item .property-title {
        color: var(--textcolor-accent);
    }
    
    .property-item .property-value {
        font-weight: 500;
        color: var(--textcolor-standard);
    }
    
    /* Switch to vertical layout for smaller viewports */
    @container layout-container (width < 800px) {
        .property-item {
            display: block;
        }
        
        .property-item .property-title {
            margin-bottom: 5px;
        }
    }
}


/* --- Value types */
#actor_creator .form-block .block-property .property-item {
    .property-value p {
        font-weight: 500;
    }
    
    .property-value .substance-richtext {
        max-width: 100%;
        overflow-wrap: anywhere;
    }
    
    @container layout-container (width < 680px) {
        .property-title {
            font: var(--textset-plus-m);
        }
        
        .property-value {
            font: var(--textset-l);
        }
    }
}


/* --- Attachment previews */
#actor_creator .form-block .block-property .property-item .property-value:has(.substance-file) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: var(--summary-row-gutter);
    -moz-column-gap: var(--summary-row-gutter);
         column-gap: var(--summary-row-gutter);
    grid-row-gap: var(--summary-row-gutter);
    row-gap: var(--summary-row-gutter);
}

#actor_creator.expression-internal .form-block .block-property .property-item .property-value:has(.substance-file) {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

#actor_creator .form-block .block-property .property-item .property-value.property-large:has(.substance-file) {
    grid-template-columns: 1fr;
}


/* !-------------------------------------------- */
/* !Optional: receipt message after submitting form */
/* !-------------------------------------------- */

#actor_creator .creator-form .form-receipt {
    h2 {
        margin-bottom: 0.7em;
    }
    
    p {
        margin-bottom: 0.7em;
    }
    
    p:last-child {
        margin-bottom: 20px;
    }
}


/* !-------------------------------------------- */
/* !Form action buttons */
/* !-------------------------------------------- */

/* --- Container */
#actor_creator .creator-action {
    position: relative;
    margin: var(--block-gutter) calc(-1 * var(--overlay-padding)) 0 calc(-1 * var(--overlay-padding));
    width: calc(100% + (2 * var(--overlay-padding)));
    padding: var(--block-inset);
    -moz-column-gap: 0;
         column-gap: 0;
    background: var(--backcolor-standard);
}

/* --- Cancel button */
#actor_creator .creator-action .toolchain-link.action-cancel {
    width: 30%;
    position: relative;

    > .primary-action {
        display: inline-block;
    }
    
    /* Variant: protected cancel button */
    .substance-protector {
        width: 100%;
    
        &.item-active {
            height: 31px;
        }
        
        &.item-active .protector-flyout {
            left: 0;
            transform: none;
            display: grid;
        }
        
        &.item-active .protector-flyout .protector-risky {
            width: -moz-min-content;
            width: min-content;
            grid-row: 2;
            margin-bottom: 10px;
        }
        
        &.item-active .protector-flyout .protector-failsafe {
            width: -moz-min-content;
            width: min-content;
            grid-row: 3;
            margin-bottom: 0;
        }
    }
}


/* --- Submit button */
#actor_creator .creator-action .toolchain-link.action-primary {
    width: 40%;

    &:only-child {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    
    .primary-action {
        display: block;
        width: 100%;
    }
}

@container layout-container (width < 800px) {
    #actor_creator .creator-action {
        display: block;
    }
    
    /* --- Cancel button */
    #actor_creator .creator-action .toolchain-link.action-cancel {
        margin-bottom: 20px;
    
        /* Variant: protected cancel button */
        .substance-protector {
            width: 100%;
    
            &.item-active .protector-flyout {
                padding: 10px 20px 10px 20px;
                left: 50%;
                transform: translateX(-50%);
            }
        
            &:not(.item-active) .protector-risky {
                display: inline-block;
            }
        
            &.item-active .protector-failsafe, 
            &.item-active .protector-risky {
                margin-left: auto;
                margin-right: auto;
            }
        }
    }


    /* --- Cancel & Submit button */
    #actor_creator .creator-action .toolchain-link.action-cancel, 
    #actor_creator .creator-action .toolchain-link.action-primary {
        text-align: center;
        display: block;
        width: 100%;
    }
}


/* !-------------------------------------------- */
/* !INTERNAL ONLY: Environment markers */
/* !-------------------------------------------- */

#actor_creator:is(.environment-dev, .environment-qa, .environment-rtp, .environment-mirror) {
    /* !--- Color + Icon marker */
    .creator-action:before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 30px;
        height: 100%;
        background: var(--color-state-crisis-light) top 6px center url(../../static/media/icon_validation_crisis.5697c91c77019e1bae21.svg) no-repeat;
        background-size: 20px;
        z-index: 10;
        pointer-events: none;
    }
    
    &.environment-qa .creator-action:before {
        background-image: url(../../static/media/icon_validation_ok.5ad815141651a003dd58.svg);
        background-color: var(--color-state-ok-medium);
    }
    &.environment-rtp .creator-action:before {
        background-image: url(../../static/media/icon_validation_crisis.5697c91c77019e1bae21.svg);
        background-color: var(--color-state-crisis-light);
    }
    &.environment-mirror .creator-action:before {
        background-image: url(../../static/media/icon_validation_warning.eff586cc341c8b81d587.svg);
        background-color: var(--color-state-warn-medium);
    }


    /* !--- Text marker */
    .creator-action:after {
        content: "DEV";
        position: absolute;
        top: 34px;
        right: 0;
        font: var(--textset-plus-m);
        font-weight: 800;
        line-height: 30px;
        letter-spacing: 0.07em;
        color: var(--textcolor-standard);
        text-shadow: 0 0 10px #fff;
        writing-mode: vertical-rl;
        text-orientation: mixed;
        z-index: 11;
        pointer-events: none;
    }
    
    &.environment-qa .creator-action:after {
        content: "QA"
    }
    &.environment-rtp .creator-action:after {
        content: "RTP"
    }
    &.environment-mirror .creator-action:after {
        content: "MIRROR"
    }
}

/* -------------------------------------------- */
/* Codebox Transity */
/* Version: 285b */
/* -------------------------------------------- */
/* Created by @twotribes, Germany */
/* -------------------------------------------- */
/* StyleSheet Scope: ACTORS for main content */
/* -------------------------------------------- */

/* !-------------------------------------------- */
/* !ACTOR: Authorization */
/* !-------------------------------------------- */

/* --- Grand container */
/* Arrangement */
#actor_authorization {
    display: grid;
    grid-template-columns: 1fr minmax(330px, 1.5fr) minmax(540px, 2.5fr) 1fr;
    grid-template-rows: min-content min-content auto;
    grid-row-gap: 80px;
    row-gap: 80px;
    grid-column-gap: 5px;
    -moz-column-gap: 5px;
         column-gap: 5px;
    padding-top: 80px;
    
    /* Default page background (client-specific backgrounds are handled in client_primary.css) */
    background: var(--backcolor-login-page) url(../../static/media/back_login.ed60d267572009a6d51a.jpg) center no-repeat;
    background-size: cover;
    padding-bottom: 30px;

    .authorization-form {
        grid-row: 1;
        grid-column: 2;
    }
    
    .authorization-product {
        grid-row: 1;
        grid-column: 3;
    }
    
    .authorization-prototype {
        grid-row: 2;
        grid-column: 1 / -1;
    }
}


/* --- Form */
#actor_authorization .authorization-form {
    background: var(--backcolor-login-form);
    padding: 30px;
    border-radius: var(--radius-panel) 0 0 var(--radius-panel);
    
    .field-entry {
        --field-backcolor: var(--transity-sand-20-x);
        
        &:not(:last-child) {
            margin-bottom: 30px;
        }
        
        /* Credential fields */
        .field-container {
            padding-top: 24px;
        }
        
        .field-container label {
            font: var(--textset-minus-l);
            font-weight: 500;
            color: #fff;
        }

        .field-container input {
            border-bottom-width: 2px;
        }

        /* Password switch button */
        .field-container .primary-action.action-view:focus-visible {
            /* This needs client-specific modification in client_primary.css */
        }
                        
        /* Login button */
        .primary-action.action-level-solid {
            margin-top: 10px;
        }
        
        .primary-action.action-level-solid:focus-visible {
            outline: var(--focus-outline-inverse);
            /* This _could_ need future client-specific modification in client_primary.css */
        }
    }
}


/* --- Software vendor info */
/* Outer container */
#actor_authorization .authorization-product {
    background: var(--backcolor-login-vendor);
    text-align: center;
    padding: 30px;
    border-radius: 0 var(--radius-panel) var(--radius-panel) 0;
    font: var(--textset-plus-s);
    color: var(--textcolor-standard);
}

.stage.brand-rms #actor_authorization .authorization-product {
    display: flex;
    -moz-column-gap: 30px;
         column-gap: 30px;
    text-align: left;
}

/* Layout variant: login page for enforced password change (no product info) */
.stage.brand-rms #actor_authorization .authorization-product:empty {
    display: none;
}

/* Inner containers */
#actor_authorization .authorization-product .product-family {
}

#actor_authorization .authorization-product .product-list.list-rms {
    width: -moz-min-content;
    width: min-content;
}

/* Product/vendor logo + tagline */
#actor_authorization .authorization-product .product-vendor .link-action {
    background: transparent url(../../static/media/logo_codebox_dark.4a36a9b0b97a624c8184.svg) center top no-repeat;
    background-size: 170px;
    padding-top: 40px;
    margin-bottom: 20px;
    display: block;
    width: 100%;
    height: 100%;
    color: #000;
    font-weight: 500;
    transition: var(--transition-color);
    
    /* Interaction states */
    @media (hover: hover) {
        &:hover {
            color: var(--textcolor-accent);
            transition: var(--transition-color);
        }
    }
}

#actor_authorization .authorization-product .product-vendor .link-action:focus-visible {
    outline-offset: 8px;
}

.stage.brand-rms #actor_authorization .authorization-product .product-vendor {
    .link-action {
        background: transparent url(../../static/media/logo_rms_solutions.6f1cca2e4f474abcab5e.svg) left top no-repeat;
        background-size: auto;
        padding-top: 70px;
    }
    
    em {
        display: block;
        margin-bottom: 0.5em;
    }
}


/* Product/Vendor information */
#actor_authorization .authorization-product .product-info {
}

/* Only with rms branding: products within family */
#actor_authorization .authorization-product .product-list.list-rms {
    .list-item {
        font-weight: 700;
        white-space: nowrap;
        padding: 11px 0 0 46px;
        min-height: 36px;
        background: transparent left top no-repeat;
    }
    
    .list-item + .list-item {
        margin-top: 15px;
    }
    
    .item-product-am {
        background-image: url(../../static/media/logo_rms_AM.18866fe5ccf5abaff3bf.svg);
    }
    .item-product-fm {
        background-image: url(../../static/media/logo_rms_FM.91fa248755a171444b80.svg);
    }
    .item-product-km {
        background-image: url(../../static/media/logo_rms_KM.2bd24c9ccd00ac15f569.svg);
    }
    .item-product-pm {
        background-image: url(../../static/media/logo_rms_PM.17c6c5b1b427d38f7f8e.svg);
    }
    .item-product-vt {
        background-image: url(../../static/media/logo_rms_VT.5e15e457476d085007bb.svg);
    }
}

/* --- PROTOTYPE ONLY: link lists to various prototypes */
#actor_authorization .authorization-prototype {
    display: flex;
    -moz-column-gap: 20px;
         column-gap: 20px;
    justify-content: center;
    font: var(--textset-plus-s);
    color: var(--textcolor-standard);

    .prototype-group {
        border-radius: var(--radius-panel);
        background: var(--backcolor-login-prototype);
        margin: 0;
        padding: 15px;
    }
    
    .prototype-group:last-child {
        margin-right: 0;
    }
    
    /* Prototype product links */
    h2 {
        font: var(--textset-m);
        color: var(--textcolor-accent);
        font-weight: 700;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        margin-bottom: 15px;
    }
    
    .prototype-list {
        display: flex;
        flex-direction: column;
        row-gap: 5px;
    }
    
    .prototype-list + .prototype-list {
        margin-top: 30px;
    }
}

/* Hide Prototype product links */
#actor_authorization .authorization-protohide {
    grid-row: 3;
    grid-column: 1 / -1;
    width: -moz-min-content;
    width: min-content;
    margin: 0 auto;
}

#actor_authorization .authorization-protohide:focus-visible {
    outline: var(--focus-outline-inverse);
}


/* !-------------------------------------------- */
/* !ACTOR: Error */
/* !-------------------------------------------- */

#actor_error {
    padding-left: 209px;
}

#actor_error .substance-communication {
    width: 50%;
    margin: 60px 0 60px 0;
}


/* !-------------------------------------------- */
/* !ACTOR: Dashboard */
/* !-------------------------------------------- */

/* --- Dashboard layout */
#actor_dashboard .dashboard-row {
    display: flex;
    margin-bottom: 30px;

    &.row-size-2 .dashboard-group {
        width: calc(50% - (10px / 2));
    }
    
    &.row-size-3 .dashboard-group {
        width: calc((100% / 3) - (2 * 20px / 3));
    }
    
    &.row-size-4 .dashboard-group {
        width: calc(25% - (3 * 30px / 4));
    }
    
    &.row-size-2 .dashboard-group:not(:last-child) {
        margin-right: 10px;
    }
    
    &.row-size-3 .dashboard-group:not(:last-child) {
        margin-right: 20px;
    }
    
    &.row-size-4 .dashboard-group:not(:last-child) {
        margin-right: 30px;
    }
    
    .dashboard-category {
        display: flex;
        flex-wrap: wrap;
    }
}

/* --- Counter matrices */
#actor_dashboard .dashboard-category.category-timespan {
    background: var(--backcolor-dashboard-time);
    --tile-backcolor-hover: var(--backcolor-dashboard-time-hover);
    --tile-counter-color: var(--textcolor-dashboard-time);
}

#actor_dashboard .dashboard-category.category-criteria {
    background: var(--backcolor-dashboard-criteria);
    --tile-backcolor-hover: var(--backcolor-dashboard-criteria-hover);
    --tile-counter-color: var(--textcolor-dashboard-criteria);
}

/* Counter tiles */
#actor_dashboard .dashboard-gadget.gadget-type-counter {
    text-align: center;
    border-bottom: 1px solid #fff;
    position: relative;
    width: 50%;
    transition: var(--transition-color);
}

@media (hover: hover) {
    #actor_dashboard .dashboard-gadget.gadget-type-counter:not(.counter-zero):has(.link-action:hover) {
        background-color: var(--tile-backcolor-hover);
        transition: var(--transition-color);
    }
}

#actor_dashboard .gadget-type-counter:first-child {
    width: 100%;
}

#actor_dashboard .gadget-type-counter:nth-child(2n) {
    border-right: 1px solid #fff;
}

/* Tile content */
#actor_dashboard .dashboard-gadget.gadget-type-counter {
    .link-action, 
    .pseudo-link {
        display: block;
        width: 100%;
        height: 100%;
        padding: 15px;
    }
    
    /* Tile title */
    .gadget-title {
        position: absolute;
        width: 100%;
        height: 36px;
        overflow: hidden;
        top: 15px;
        left: 0;
        font: var(--textset-minus-l);
        font-weight: 400;
        color: var(--textcolor-accent);
    }
    
    .gadget-amount {
        margin-top: 40px;
    }
    
    /* Counter and direction */
    .gadget-amount mark {
        background: none;
        display: inline-block;
        position: relative;
        color: var(--tile-counter-color);
        font-weight: 200;
        font-size: 35px; /* edge case */
        transition: var(--transition-color);
    }
    
    &.gadget-type-counter.counter-zero mark {
        color: #fff;
        font-weight: 500;
    }
    
    .gadget-amount.amount-falling mark:after, 
    .gadget-amount.amount-rising mark:after {
        content: "";
        display: block;
        position: absolute;
        bottom: -4px;
        right: -18px;
        height: 25px;
        width: 15px;
        background: transparent url(../../static/media/TEMP_icon_arrow.be5258d6c2df3272a217.svg) center no-repeat;
    }
    
    .gadget-amount.amount-rising mark:after {
        transform: rotateZ(-180deg);
    }
    
    /* Interaction states */
    @media (hover: hover) {
        .link-action:hover .gadget-amount mark {
            color: #000;
            transition: var(--transition-color);
        }
    }
    
    .link-action:focus-visible {
        outline: var(--focus-outline-accent);
    }
}


/* --- Chart lists */
#actor_dashboard .dashboard-group.group-list {
    /* List headline + entry container */
    .gadget-title {
        font: var(--textset-minus-l);
        color: var(--textcolor-accent);
        border-bottom: var(--line-signature);
        padding: 0 0 5px 24px;
        margin-bottom: 10px;
    }
    
    .gadget-entry {
        display: block;
        border-bottom: var(--line-standard);
        padding: 0;
        position: relative;
        color: var(--textcolor-standard);
        transition: var(--transition-color);
    }
    
    .gadget-entry:before {
        top: 10px;
        pointer-events: none; /* let clicks travel down to .link-action */
    }
    
    .gadget-entry:last-child {
        border: none;
    }
    
    /* Entry content */
    .gadget-entry .link-action {
        display: block;
        width: 100%;
        height: 100%;
        padding: 10px 0 10px 28px;
    }
    
    .gadget-amount {
        margin-bottom: 3px;
    }
    
    .gadget-amount mark {
        font: var(--textset-plus-l);
        color: var(--textcolor-accent);
    }
    
    .gadget-entry:not(:first-child) .amount-unit {
        display: none;
    }
    
    /* Interaction states */
    @media (hover: hover) {
        .gadget-entry:has(.link-action:hover) {
            background-color: var(--backcolor-standard);
            transition: var(--transition-color);
        }
    }
    
    .link-action:focus-visible {
        outline: var(--focus-outline-accent);
    }
}


/* !-------------------------------------------- */
/* !ACTOR: ListControl */
/* Expressions: compact, collapsed */
/* !-------------------------------------------- */

/* --- View controller (so far only used in ObjectView) */
#actor_listcontrol {
    .listcontrol-view {
        position: relative;
        display: block;
        background: #fff;
        width: 100%;
        height: 100%;
        border-bottom: var(--line-signature);
    }

    /* Back to list button */
    .listcontrol-view .primary-action {
        margin-top: 5px;
    }
    
    &.expression-collapsed .listcontrol-view .primary-action {
        text-indent: -1000em;
        width: 100%;
        transition: var(--transition-universal);
    }
    
    &.expression-collapsed .listcontrol-view .primary-action:before {
        left: calc(50% - (var(--button-iconsize) / 2));
        transition: var(--transition-universal);
    }
    
    /* Collapser button */
    .listcontrol-view .expand-action {
        position: absolute;
        bottom: 8px;
        left: 0;
    }
    
    .listcontrol-view .expand-action.item-active:before {
        transform: rotateZ(180deg); /* DEPRECATED: remove when TB-1299 is done */
    }
}


/* !-------------------------------------------- */
/* !ACTOR: Multi-column Entity list */
/* !-------------------------------------------- */

/* --- First actor element */
#actor_list .substance-table:first-child, 
#actor_list .substance-tab-bar:first-child {
    margin-top: 20px;
}

#actor_list .substance-table:last-child {
    margin-bottom: 50px;
}


/* --- Multiple lists, separated by a tab bar */
/* Visibility of active table */
#actor_list .substance-tab-bar ~ .substance-table {
    display: none;
}

#actor_list .substance-tab-bar ~ .substance-table.item-active {
    display: table;
}


/* --- Flyouts from a list's optional filter bar */
/* Safety net: flyout host could originate from 2nd row of filter bar */
#actor_list .substance-filter .flyout-host {
    --filter-criterion-height: 60px;
    
    max-height: calc(100dvh - var(--main-navigation-height) - var(--main-header-height) - (2 * var(--filter-criterion-height)) - 30px);
    overflow: auto;
}

/* Filter bars can also go below a Tab bar. But these filters are usually frozen and don't spawn flyouts. */


/* --- List-loader buttons */
#actor_list .substance-table ~ .substance-toolchain {
    -moz-column-gap: 0;
         column-gap: 0;
    justify-content: space-between;
    margin: 30px auto 50px auto;

    /* Edge case: button for Load All is missing */
    .action-load-more:first-child {
        width: 100%;
    }
    
    .action-load-more:first-child .primary-action {
        display: inline-block;
    }
    
    .action-up:nth-child(2) {
        position: absolute;
        right: 0;
    }
    
    /* Edge case: only 1 button */
    .toolchain-link:only-child {
        margin-left: auto;
    }
    
    /* Content of button containers */
    .action-load-more {
        text-align: center;
    }
    
    .action-load-more .load-state {
        font-weight: 700;
        color: var(--textcolor-standard);
        margin-bottom: 15px;
    }
    
    .action-load-more .primary-action {
        margin: 0 auto 0 auto;
    }
}


/* --- Messages replacing the actual list (e.g. for loading/filter errors) */
#actor_list .substance-message {
    width: 50%;
    padding: 20px;
    margin: 30px auto 30px auto;
    
    h4 {
        margin-bottom: 0.6em;
    }
}


/* !-------------------------------------------- */
/* !ACTOR: Single-column Entity list */
/* !-------------------------------------------- */

/* --- EXPRESSION VARIANTS: Single-column list */
#actor_list:is(.expression-compact, .expression-collapsed) {
    --sidebar-backcolor: #fff;
    --sidebar-backcolor-active: var(--backcolor-standard);
    --sidebar-bordercolor: var(--linecolor-standard);
    --sidebar-weight-properties: 400;
    
    background: var(--sidebar-backcolor);
}

/* Cell container */
#actor_list:is(.expression-compact, .expression-collapsed) .cell {
    color: var(--textcolor-standard);
    transition: var(--transition-color);
    
    &.item-active {
        background: var(--sidebar-backcolor-active);
        transition: var(--transition-color);
    }
    
    /* Inner link container */
    a {
        display: block;
        position: relative;
        padding: 11px 5px 11px 0;
        border-bottom: 2px solid var(--sidebar-bordercolor);
        transition: var(--transition-sidebar);
        
        --cell-active-inset: 15px;
    }
    
    &.item-active a {
        padding-left: var(--cell-active-inset);
        transition: var(--transition-sidebar);
    }
    
    @media (hover: hover) {
        &:hover a {
            padding-left: var(--cell-active-inset);
            transition: var(--transition-sidebar);
        }
    }
}

/* Inner link container: highlight marker */
#actor_list:is(.expression-compact, .expression-collapsed) .cell {
    /* Cell highlight marker */
    a:before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: calc(-1 * var(--line-active-width));
        width: var(--line-active-width);
        height: 100%;
        background: var(--backcolor-active);
        transition: var(--transition-sidebar);
    }
    
    &.item-active a:before {
        left: 0;
        transition: var(--transition-sidebar);
    }
    
    @media (hover: hover) {
        &:hover a:before {
            left: 0;
            transition: var(--transition-sidebar);
        }
    }
    
    /* Inner link container: hover & highlight text */
    &.item-active a, 
    &.item-active a * {
        color: #000;
        
        --backcolor-id-point: #fff;
        
        transition: var(--transition-color);
    }
    
    /* Interaction states */
    @media (hover: hover) {
        a:hover, 
        a:hover * {
            color: #000;
            transition: var(--transition-color);
        }
    }
    
    a:focus-visible {
        outline-offset: -6px;
    }
}


/* --- EXPRESSION VARIANT: Compact list / entity wrapper */
#actor_list.expression-compact .cell .substance-entity {
    font-weight: 400;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    
    /* Entity IDs with point suffix */
    .substance-id:has(.id-suffix) {
        margin-top: -4px;    
    }
    
    /* Inner Penalty fact ID */
    .entity-id {
        font-weight: 500;
    }
    
    /* Additional property */
    & ~ * {
        font-weight: var(--sidebar-weight-properties);
        padding-left: 28px;
        margin-top: -6px; /* tighter because entity has only one line */
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    &.entity-complaint ~ *, 
    &.entity-incident ~ * {
        padding-left: 30px;
    }
    
    &.entity-admin ~ * {
        padding-left: 32px;
    }
    
    & ~ * + * {
        margin-top: 0;
    }
}


/* --- EXPRESSION VARIANT: Collapsed compact list */
#actor_list.expression-collapsed .cell {
    /* Inner link container */
    a {
        padding-top: 5px;
        padding-bottom: 2px;
        padding-right: 0;
        
        --line-active-width: var(--line-signature-width);
        --cell-active-inset: 10px;
    }
    
    /* Hide all text */
    .substance-entity ~ * {
        display: none;
    }
    
    .substance-entity {
        text-indent: -1000em;
        padding-left: 20px;
        width: 100%;
    }
    
    /* Reposition entity icon */
    .substance-entity:before {
        width: 17px;
        height: 17px;
        background-size: 100%;
        top: 2px;
    }
    
    /* Resurface entity ID */
    .substance-id, 
    .substance-id .id-suffix {
        text-indent: 0;
    }
    
    .substance-id {
        display: block;
    }

    .substance-id:not(:has(.id-suffix)) {
        top: 3px;
    }
        
    .substance-id .id-suffix {
        display: inline-block;
    }
}


/* !-------------------------------------------- */
/* !ACTOR: ObjectControl */
/* !-------------------------------------------- */

/* --- Button bar for ObjectView */
#actor_objectcontrol {
    display: flex;
    justify-content: space-between;
    
    /* Subclasses in use: objectcontrol-state, objectcontrol-internal */
    .objectcontrol-tools:not(:first-child) {
        margin-left: 30px;
    }
    
    .objectcontrol-tools:last-child:not(:only-child) {
        margin-left: auto;
    }
    
    /* Button row per container */
    .objectcontrol-tools {
        -moz-column-gap: 10px;
             column-gap: 10px;
    }
}


/* --- Toolbars and global actions */
/* Customized view controllers */
#actor_objectcontrol.expression-menu .objectcontrol-tools {
    .toolchain-link.substance-flyout > .view-action, 
    .toolchain-link > .substance-flyout > .view-action {
        font-weight: 500;
    }
    
    .view-action {
        border-radius: var(--radius-interaction);
        border: 1px solid var(--actioncolor-shade-medium);
        padding: 6px 20px 4px 6px;
        height: var(--button-height-mini);
    }
    
    .view-action:after {
        right: 4px;
        margin-top: -6px;
    }
    
    .view-action:hover {
        border-color: var(--actioncolor-hover);
    }
}


/* --- Central action flyouts */
#actor_objectcontrol .objectcontrol-tools .toolchain-link .flyout-host {
    max-height: calc(100dvh - var(--main-navigation-height) - var(--main-header-height) - var(--main-ensemble-gutter) - var(--objectcontrol-height) - 10px);
    overflow: auto;
}

/* EXPERIMENTAL: temporarily dissolve scrolling context whenever a tooltip is open to prevent bottom cut-off */
#actor_objectcontrol .objectcontrol-tools .toolchain-link .flyout-host:has(.substance-textpicker .substance-tooltip :is(.tooltip-controller:hover, .tooltip-controller:focus)) {
    overflow: visible;
}

@media (hover: none) {
    #actor_objectcontrol .objectcontrol-tools .toolchain-link .flyout-host:has(.substance-textpicker .substance-tooltip :is(.tooltip-controller:active, .tooltip-controller:focus)) {
        overflow: visible;
    }
}

/* Inner flyouts (from value auto-suggest) need to be able to overlap */
#actor_objectcontrol .objectcontrol-tools .toolchain-link .flyout-host:has(.field-entry.substance-flyout.flyout-compact) {
    overflow: visible;
}

/* Custom alignment: rightmost flyout */
#actor_objectcontrol .objectcontrol-tools:last-child:not(:only-child) .toolchain-link:last-child .flyout-host {
    right: 0;
    left: auto;
    transform: none;
}

/* Custom alignment: leftmost flyout(s) */
#actor_objectcontrol .objectcontrol-tools:first-child .toolchain-link:first-child > .substance-flyout > .flyout-host, 
#actor_listcontrol.expression-collapsed + #actor_objectcontrol .objectcontrol-tools:first-child .toolchain-link:nth-child(2) > .substance-flyout > .flyout-host {
    left: 0;
    transform: none;
}

/* Protection dialogs */
#actor_objectcontrol .objectcontrol-tools .toolchain-link > .substance-protector.protector-type-floating.item-active .protector-flyout {
    bottom: auto;
    top: -55px;
    left: auto;
    right: 0;
    transform: none;
    z-index: 10;
}

#actor_objectcontrol .objectcontrol-tools:first-child .toolchain-link:first-child > .substance-protector.protector-type-floating.item-active .protector-flyout {
    left: 0;
    right: auto;
}


/* --- Edge case: record lock message */
#actor_objectcontrol > .substance-message {
    width: 100%;
    padding-left: 0;
    height: 40px;
    background: none;

    .substance-richtext {
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .substance-richtext > * {
        display: inline;
        font: var(--textset-minus-l);
    }
    
    .substance-richtext h4 {
        font-weight: 600;
    }
    
    .substance-richtext h4:after {
        content: ": ";
    }
}


/* !-------------------------------------------- */
/* !ACTOR: Incident data */
/* !-------------------------------------------- */

/* --- Main containers */ 
#actor_incident {
    display: flex;
    -moz-column-gap: 35px;
         column-gap: 35px;
    
    --incident-main-width: 72%;
    --incident-supplement-width: 28%;
}

#actor_incident .incident-main {
    width: calc(var(--incident-main-width) - 35px);
    
    --block-backcolor: var(--backcolor-block);
    --block-backcolor-marker: var(--backcolor-marker);
    --blockhead-backcolor: #fff;
    --block-inset: 10px;
    --block-field-backcolor: #fff;
    --block-field-bordercolor-hover: var(--linecolor-active);
    --block-field-bordercolor-disabled: var(--linecolor-light);
}

#actor_incident .incident-supplement {
    width: var(--incident-supplement-width);
        
    --block-backcolor: transparent;
    --blockhead-backcolor: #fff;
    --block-inset: 0px;
}


/* --- Abstract content block */
#actor_incident .incident-block {
    margin-bottom: 30px;
    padding: 0 var(--block-inset) var(--block-inset) var(--block-inset);
    display: flex;
    flex-wrap: wrap;
    -moz-column-gap: 30px;
         column-gap: 30px;
    align-items: flex-start;
    background-color: var(--block-backcolor);

    &.block-collapsible:not(.item-active):not(:has(.property-item.item-essential)) {
        padding-bottom: 0;
    }
    
    &.block-collapsible:not(.item-active):has(.property-item.item-essential) {
        align-items: center;
    }
    
    &:is(.block-attachments, .block-history) {
        display: block; /* Firefox produces an undesired, buggy margin-bottom for display: flex */
    }
    
    /* Active mutable blocks gain topmost z-index position */
    /* TODO: in Admin we might have multiple subsequent blocks like this */
    &.block-mutable.mutable-active {
        /* position: relative; -- risky setting bc of overlaps with preceding flyouts */
        z-index: 1;
    }
    
    /* Hide block content: collapsed blocks + parts of mutable blocks (depending on state) */
    &.block-collapsible:not(.item-active) .block-controller ~ *:not(.substance-message), 
    &.block-mutable:not(.mutable-active) .substance-fieldlist, 
    &.block-mutable.mutable-active .property-mutable {
        display: none;
    }
    
    /* Temporary mutability switch for a block */
    &.block-mutable.mutable-switch.mutable-active {
        border: var(--line-signature-active);
        
        /* Bright set from default .incident-block */
        --block-backcolor: transparent;
        --block-backcolor-marker: var(--backcolor-marker);
        --blockhead-backcolor: #fff;
        --block-inset: 0px;
        --block-field-backcolor: var(--field-backcolor);
        --block-field-bordercolor-hover: var(--field-bordercolor-hover);
        --block-field-bordercolor-disabled: var(--field-bordercolor-disabled);
    }
}


/* --- Block header & controller */
/* Container of block actions */
#actor_incident .incident-block .block-controller {
    background-color: var(--blockhead-backcolor);
    border-bottom: var(--line-signature);
    padding: 0 0 6px 0;
    margin: 0 calc(-1 * var(--block-inset)) 10px calc(-1 * var(--block-inset));
    width: calc(100% + (2 * var(--block-inset)));
    position: relative;
    display: flex;
    -moz-column-gap: 10px;
         column-gap: 10px;
    align-items: center; /* baseline would be nicer but Firefox doesn't like it */
}

#actor_incident .incident-block.block-collapsible:not(.item-active):not(.mutable-active):not(:has(.property-item.item-essential)) .block-controller {
    margin-bottom: 0;
}

#actor_incident .incident-block.block-mutable.mutable-switch.mutable-active .block-controller {
    margin: calc(-1 * var(--line-signature-width)) calc(-1 * (var(--block-inset) + var(--line-signature-width))) 10px calc(-1 * (var(--block-inset) + var(--line-signature-width)));
    width: calc(100% + (2 * (var(--block-inset) + var(--line-signature-width))));
    border-bottom: var(--line-signature-active);
}

/* Headline */
#actor_incident .incident-block .block-controller {
    h3 {
        font: var(--textset-minus-l);
        white-space: nowrap;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    > h3 {
        min-height: 21px; /* offsets 1px increase when <em> wrapped counters are inside */
        color: var(--textcolor-accent);
        flex-grow: 1;
    }
    
    /* Headline: integrated ID numbers */
    h3 .substance-id {
        font-size: inherit;
        font-weight: inherit;
    }
    
    h3 .substance-id .id-prefix {
        font: var(--textset-minus-l);
    }
    
    h3 .substance-id .id-suffix.suffix-point {
        color: var(--textcolor-standard);
        margin-right: 4px;
    }
}

/* Block expander buttons */
#actor_incident .block-controller .view-action {
    flex-grow: 1;
}

#actor_incident .block-controller .toolchain-link > .substance-flyout > .view-action:focus-visible {
    outline-offset: 1px;
}

/* Block toolbar */
#actor_incident .block-controller .block-actions {
    -moz-column-gap: 12px;
         column-gap: 12px;
}

/* Protected primary actions */
#actor_incident .block-controller .toolchain-link .substance-protector {
    &.item-active {
        top: -16px;
    }
    
    .protector-title {
        width: -moz-max-content;
        width: max-content;
    }
    
    &.protector-type-floating .protector-flyout {
        left: auto;
        transform: none;
        right: 0;
        top: 0;
        bottom: auto;
        z-index: 10;
    }
}

/* Block-level flyouts (.toolchain.substance-flyout is DEPRECATED) */
#actor_incident .block-controller .toolchain-link.substance-flyout:before, 
#actor_incident .block-controller .toolchain-link > .substance-flyout:before {
    bottom: -20px;
}

#actor_incident .block-controller .toolchain-link.substance-flyout > .flyout-host, 
#actor_incident .block-controller .toolchain-link > .substance-flyout > .flyout-host {
    margin-top: 12px;
    right: 0;
    left: auto;
    transform: none;
}

#actor_incident .block-controller .toolchain-link.substance-flyout:not(:last-child) > .flyout-host, 
#actor_incident .block-controller .toolchain-link:not(:last-child) > .substance-flyout > .flyout-host {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
}

#actor_incident .incident-main .block-controller .toolchain-link.substance-flyout > .flyout-host, 
#actor_incident .incident-main .block-controller .toolchain-link > .substance-flyout > .flyout-host {
    width: var(--flyout-width-standard); /* Main column flyouts usually pack more interactivity */
}

#actor_incident .block-controller .toolchain-link.substance-flyout .flyout-host.host-size-medium, 
#actor_incident .block-controller .toolchain-link > .substance-flyout .flyout-host.host-size-medium {
    width: var(--flyout-width-medium);
}

/* Edit/Save/Cancel trio for mutable blocks */
#actor_incident .incident-block.block-mutable:not(.mutable-active) .block-controller .toolchain-link:not(.link-mutator), 
#actor_incident .incident-block.block-mutable.mutable-active .block-controller .link-mutator {
    display: none;
}


/* --- Block content: Forms */
/* Large fieldlist blocks */
#actor_incident .incident-block.block-mutable.mutable-switch.mutable-active > .substance-fieldlist {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
}

#actor_incident .incident-block .block-property.substance-fieldlist {
    container-name: route-container;
    container-type: inline-size; /* also establishes a stacking context! */
}

#actor_incident .incident-block .block-property.substance-fieldlist:has(.field-entry.flyout-compact.flyout-active) {
    position: relative;
    z-index: 1; /* override the stacking order of a route table */
}

#actor_incident .incident-block .substance-fieldlist + .substance-fieldlist {
    border-top: var(--line-standard-thick);
    padding-top: 20px;
}

/* Fieldlist Segments */
#actor_incident .incident-block .substance-fieldlist .fieldlist-segment + .fieldlist-segment {
    margin-top: 20px;
}

/* Fieldlist Segments: Collapsible segments */
#actor_incident .incident-block .substance-fieldlist .fieldlist-segment.segment-optional {
    padding: 10px;
    border: 1px solid var(--linecolor-medium);
}

#actor_incident .incident-block .substance-fieldlist .primary-action + .fieldlist-segment.segment-optional {
    margin-top: 20px;
}

/* Fieldlist Segments: Collapsible segments: Expander/Collapser button */
#actor_incident .incident-block .substance-fieldlist .fieldlist-segment.segment-optional {
    &:not(.item-active) .expand-action:before {
        transform: rotateZ(90deg); /* override needed because this is a nested expander button */
    }
    
    /* Collapsible segments: Showing/hiding controlled field entries */
    &:not(.item-active) .field-entry {
        display: none;
    }
    
    &:not(.item-active) .field-entry:first-child {
        display: block;
        margin-bottom: 0;
    }
    
    &.item-active .field-entry {
        display: block;
    }
}

/* Fieldlist: inner list of fields */
#actor_incident .incident-block .block-property.substance-fieldlist > ul, 
#actor_incident .incident-block ul.block-property.substance-fieldlist {
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--field-entry-margin);
    -moz-column-gap: var(--field-entry-margin);
         column-gap: var(--field-entry-margin);
}

/* Fields */
#actor_incident .incident-block .substance-fieldlist {
    .field-entry {
        width: 100%;
    }
    
    .field-entry.entry-stop .field-container {
        padding-top: calc(var(--field-height-label) + 4px);
    }
    
    /* Special fields: shorter date and time fields */
    /* This is automatically pairing date/time combos on the same row for desktop layouts */
    .field-entry:has(:is(input[type="date"], input[type="time"])) {
        width: calc(50% - var(--field-entry-margin) / 2);
    
        @container route-container (width < 680px) {
            width: 100%;
        }
    }
    
    /* Special fields: Side-by-side fields - <select> fields in the optional route table filters */
    .fieldlist-segment.segment-optional .field-entry.entry-select + .field-entry.entry-select, 
    .fieldlist-segment.segment-optional .field-entry.entry-select:has(+ .field-entry.entry-select) {
        width: calc(50% - var(--field-entry-margin) / 2);
    
        @container route-container (width < 680px) {
            width: 100%;
        }
    }

    > .primary-action {
        margin-top: 20px;
    }
}


/* --- Block content: Abstract content */
#actor_incident .incident-block > * {
    width: 100%;
}

#actor_incident .incident-main .incident-block > *:not(.block-controller) {
    --field-backcolor: var(--block-field-backcolor);
    --field-bordercolor-hover: var(--block-field-bordercolor-hover);
    --field-bordercolor-disabled: var(--block-field-bordercolor-disabled);
}


/* --- Block content: Property lists */
/* Override collapsed property lists if they contain essential items */
#actor_incident .incident-block.block-collapsible:not(.item-active) .block-property:has(.property-item.item-essential) {
    display: flex;
    flex-grow: 0;
    align-items: center;
    -moz-column-gap: 20px;
         column-gap: 20px;
    row-gap: 20px;
    width: -moz-min-content;
    width: min-content;

    .property-item:not(.item-essential) {
        display: none;
    }
    
    .property-item.item-essential {
        display: flex;
        align-items: center;
        -moz-column-gap: 10px;
             column-gap: 10px;
    }
    
    .property-item.item-essential .property-title {
        display: block;
        padding: 0;
    }
    
    .property-item.item-essential .property-value {
        display: block;
        padding: 0;
        border: none;
    }
}

/* 2-column layout */
#actor_incident .incident-block.block-columns {
    .block-property {
        display: table;
        flex-grow: 1;
        flex-shrink: 1;
    }
    
    .block-main {
        width: calc(55% - 30px);
    }
    
    .block-supplement {
        width: 45%;
    }
}

/* Key/Value pairs */
#actor_incident .property-item {
    display: table-row;

    .property-title {
        font-weight: 200;
        padding: 10px 15px 10px 0;
        display: table-cell;
        vertical-align: top;
    }
    
    .property-value {
        color: var(--textcolor-standard);
        padding: 10px 0 10px 0;
        width: 100%; /* enforce maximum width */
        display: table-cell;
        vertical-align: top;
        border-bottom: 1px solid var(--linecolor-light);
    }
    
    .property-value.value-adversary {
        word-break: break-word;
    }
    
    &:first-child .property-title, 
    &:first-child .property-value {
        padding-top: 5px;
    }
    
    &:last-child .property-value {
        border: none;
    }
}

/* Marked pairs */
#actor_incident .property-item.property-marked {
    background: var(--block-backcolor-marker);

    .property-title {
        font-weight: 400;
        color: #000;
        padding-left: 5px;
    }
    
    .property-value {
        color: #000;
        padding-right: 5px;
    }
    
    .property-value p {
        color: #000;
    }
}

/* Value variants */
#actor_incident .property-item .property-value {
    /* Harmonized font weight */
    > p:not(.substance-entity), 
    > .substance-flyout .flyout-controller, 
    .substance-editor .editor-value, 
    > .substance-entity.entity-user, 
    > .substance-entity.entity-trip, 
    > .substance-entity.entity-channel, 
    > .substance-entity.entity-dunning, 
    > .substance-entity.entity-complaint {
        font-weight: 500;
    }
    
    /* Vertical stacking inside value cell */
    > p + p, 
    > .value-link + .value-link, 
    > .substance-editor + .value-link, 
    > .substance-flyout + * {
        margin-top: 0.7em;
    }
    
    .substance-editor.editor-mutable:not(.editor-type-boolean) {
        margin-top: -6px;
        margin-left: -5px;
        display: block;
    }
    
    .substance-entity:first-child {
        margin-top: -5px;
    }
    
    .substance-entity {
        display: block;
    }
    
    .substance-flyout, 
    .substance-entity.entity-validation, 
    .substance-entity.entity-dunning, 
    .substance-entity.entity-state {
        display: inline-block; /* could act as flyout-controller or would look awkward */
    }
    
    /* Value-internal layout */
    .value-link {
        display: flex;
        flex-wrap: wrap;
        -moz-column-gap: 10px;
             column-gap: 10px;
        row-gap: 5px;
        align-items: center;
    }
    
    /* TODO: clean display of dunning levels */
    .substance-entity.entity-dunning {
        /* TODO: dirty temporary hack */
        margin-top: -5px;
        margin-left: 10px;
        vertical-align: super;
    }
    
    * + .substance-entity.entity-validation, 
    * + .substance-flyout .substance-entity.entity-validation {
        margin-top: 5px; 
    }
}

/* Format essential key/value pairs when block is collapsed */
#actor_incident .incident-block.block-collapsible:not(.item-active) .property-item.item-essential .property-value {
    .substance-entity:first-child {
        margin-top: 0;
    }
    
    
    .substance-entity {
        display: block;
    }
}

/* DEPRECATED PENALTY: Special case: Incident type */
#actor_incident .property-item .property-value .entity-incident + p {
    padding-left: 30px;
}


/* --- Block content: Lists of related entities */
/* Basic container shaping */
#actor_incident .block-related .substance-table {
    margin: 0 calc(-1 * var(--block-inset)) 0 calc(-1 * var(--block-inset));
    width: calc(100% + (2 * var(--block-inset)));

    tr:first-child {
        border-top: none;
    }
    
    tr:first-child td {
        padding-top: 5px;
    }
    
    tr:first-child:has(td.col-marked) td {
        padding-top: 15px;
    }
    
    td:first-child {
        padding-left: var(--block-inset);
    }
    
    td.col-marked {
        background-color: var(--block-backcolor-marker);
    }
    
    td:not(:last-child) {
        padding-right: 0;
    }
    
    /* Validation chips */
    .substance-entity.entity-validation {
        margin-bottom: 10px;
        width: -moz-min-content;
        width: min-content;
    }
    
    .substance-entity.entity-validation:last-child {
        margin-bottom: 0;
    }
    
    /* IDs with additional information */
    .substance-id:has(+ *) {
        margin-bottom: 5px;
    }
    
    /* Exceptions for tables with only one row */
    tr:only-child td:first-child p {
        font-weight: 400;
        color: inherit;
    }
    
    /* Action buttons in last column */
    td:last-child {
        text-align: right;
    }
    
    td:last-child p {
        text-align: left;
    }
}

/* --- Block content: Longform description */
#actor_incident .block-description .editor-value {
    color: var(--textcolor-standard);
}

/* --- Block content: Attachments */
#actor_incident .block-attachments {
    /* Tab-controlled attachment views */
    .block-controller {
        margin-bottom: 0;
    }
    
    .substance-tab-bar {
        padding-top: 0;
    }
    
    .substance-tab-bar ~ *:not(.item-active) {
        display: none;
    }
    
    /* Attachment view: Grid or 1-column list */
    .block-property {
        display: flex;
        flex-wrap: wrap;
        row-gap: 10px;
        -moz-column-gap: 10px;
             column-gap: 10px;
    }
    
    .property-item {
        width: calc(50% - 5px);
    }
    
    .block-property.property-large .property-item {
        width: 100%;
    }
    
    /* Attachment view: compact document container */
    .block-property.property-large .substance-file.file-document .file-thumbnail {
        aspect-ratio: auto;
        background-position: 6px 6px;
        padding: 10px 6px 6px 35px;
        min-height: 35px;
        
        a {
            position: static;    
        }
        
        .file-name {
            font: var(--textset-m);
            position: static;
            text-align: left;
            word-break: break-all;
            -ms-word-break: break-all;
        }
    }
    
    .block-property.property-large .substance-file.file-document:has(.file-assignment) .file-thumbnail .file-name {
        padding-right: 55px; /* Hack: leave enough space for 2 Point markers */
    }
    
    /* Protected delete buttons */
    .property-item .substance-protector {
        &.item-active {
            z-index: 20;
        }
        
        .protector-flyout {
            text-align: right;
        }
        
        &.protector-type-floating .protector-flyout {
            left: auto;
            transform: none;
            right: 0;
            top: 0;
            bottom: auto;
            z-index: 10;
        }
        
        &.protector-type-floating .protector-title {
            width: -moz-max-content;
            width: max-content;
        }
        
        .primary-action {
            margin-left: auto;
        }
    }
}


/* --- Block content: History log – helper elements */
#actor_incident .block-history .block-controller {
    margin-bottom: 0;
}

#actor_incident .block-history .block-controller + *:not(.substance-tab-bar) {
    margin-top: 10px;
}

/* Prominent, uncollapsible messages for this block */
#actor_incident .block-history > .substance-message {
    margin-bottom: 20px;
}

/* Tab-controlled history view container */
#actor_incident .block-history .substance-tab-bar {
    margin-bottom: 20px;
}

#actor_incident .block-history .block-controller + .substance-tab-bar {
    padding-top: 0;
}

#actor_incident .block-history .substance-tab-bar:has(~ .history-view.item-active .substance-filter:first-child) {
    margin-bottom: 10px;
}

#actor_incident .block-history .substance-tab-bar ~ *:not(.item-active) {
    display: none;
}

/* Filters + Loaders */
#actor_incident .block-history { 
    .substance-filter .filter-criterion, 
    .substance-filter .filter-criterion .criterion-descript, 
    .substance-filter .filter-criterion .criterion-descript .view-action {
        width: 100%;
    }
    
    .substance-filter .filter-criterion .flyout-host {
        max-width: 100%;
    }
    
    > .substance-toolchain .toolchain-link, 
    .history-view > .substance-toolchain .toolchain-link {
        display: block;
        text-align: center;
        margin: 20px auto 0 auto;
    }
    
    > .substance-toolchain .toolchain-link .primary-action, 
    .history-view > .substance-toolchain .toolchain-link .primary-action {
        margin-top: 10px;
        display: inline-block;
    }
}


/* --- Block content: History log – daily blocks */
#actor_incident .block-history h4 .substance-timestamp {
    color: var(--textcolor-standard);
    margin-bottom: 10px;
    text-align: right;

    .timestamp-date {
        font-weight: 400;
    }
    
    .timestamp-day {
        font-weight: 500;
    }
}

#actor_incident .block-history .history-list {
    margin-bottom: 10px;
    background-color: var(--backcolor-block);
}


/* --- Block content: History log – single history events */
/* Event container */
#actor_incident .block-history .history-event {
    position: relative;
    color: var(--textcolor-standard);
    padding: 10px 10px 10px 10px;
    border-bottom: 1px solid var(--linecolor-light);

    &:last-child {
        border: none;
    }
    
    /* Event content: container arrangement */
    .event-content {
        margin-bottom: 5px;
        display: grid;
        grid-template-columns: auto min-content;
    }
    
    .event-content .primary-action {
        grid-row: 1;
        grid-column: 2;
    }
    
    .event-content .event-action {
        font-weight: 500;
        grid-row: 1;
        grid-column: 1;
    }
    
    /* Event content: title of action, point references */
    .event-content .event-action .substance-id .id-suffix.suffix-point {
        margin-right: 4px;
        --backcolor-id-point: #fff;
    }
    
    /* Event content: optional download */
    .event-content .event-action .link-action {
        color: var(--actioncolor);
        transition: var(--transition-color);
    }
    
    @media (hover: hover) {
        .event-content .event-action .link-action:hover {
            color: var(--actioncolor-hover);
            transition: var(--transition-color);
        }
    }
    
    /* Event content: optional comment */
    .event-comment {
        margin-top: 5px;
        font: var(--textset-s);
        font-weight: 500;
        grid-row: 2;
        grid-column: 1 / -1;
    }
    
    @media (hover: hover) {
        .event-comment .substance-richtext[title]:hover {
            cursor: help;
        }
    }
    
    /* Event metadata: container arrangement */
    .event-metadata {
        display: flex;
        flex-wrap: wrap;
        row-gap: 8px;
        align-items: flex-end;
    }
    
    /* Event metadata: author & incoming channel */
    .event-author {
        flex-grow: 1;
        display: flex;
        flex-wrap: wrap;
        -moz-column-gap: 6px;
             column-gap: 6px;
        row-gap: 4px;
    
        .substance-entity.entity-channel {
            top: 3px;
        }
        
        .substance-entity.entity-channel:has(~ .user-level-passenger) {
            top: 2px;
        }
        
        &.substance-flyout:before {
            left: 11px;
        }
        
        &.substance-flyout .flyout-host {
            left: -20px;
            transform: none;
        }
    }
    
    /* Event metadata: timestamp */
    .event-date {
        line-height: 20px;
    
        .substance-timestamp {
            font: var(--textset-s);
        }
        
        .timestamp-time {
            font-weight: 500;
        }
    }

    /* Event metadata: optional deadline */
    .event-deadline {
        width: 100%;
        margin-top: 4px;
    }
    
    /* Event metadata: optional recipient */
    .event-recipient {
        width: 100%;
    }
}

/* -------------------------------------------- */
/* two tribes DREI – UI unit test framework */
/* -------------------------------------------- */
/* Created by twotribes.de, Germany
:: Author: Michael Burgstahler
:: Testing the tests: thanks to codemart.ro
:: Nurturing the tests: thanks to codebox.de and junidas.de */
/* -------------------------------------------- */
/* License: proprietary */
/* -------------------------------------------- */
/* Core test modules -- 📅 version 50:

:: Core: Exclusion - temporary visual overrides
:: Core: Exclusion - TinyMCE instances
:: Core: Abstract debugging markers
:: Core: Generic malformed HTML tags & constructs
:: Core: Violations of accessibility standards and patterns */


/* Framework test modules -- 📅 version 56:

:: Framework-specific: two tribes EINS framework for UI construction
Violations of accessibility standards and patterns

:: Framework-specific: two tribes EINS framework for UI construction
Misconfigured EINS baseline UI components */


/*  Project-specific test modules -- 📅 version 79:

:: Project-specific: Codebox Transity
Misconfigured EINS custom UI constructs

:: Project-specific: Codebox Transity
Misconfigured Transity actors */

/* -------------------------------------------- */
/* Current scope of this package: 

:: 🛑 28 violations 
:: ⚠️ 43 warnings */

/* -------------------------------------------- */

/* -------------------------------------------- */
/* !SETUP: Configuration of visual error markers */
/* -------------------------------------------- */
/* Root condition for test execution: 
:: DOM subtrees marked with .tt-drei gateway class
/* -------------------------------------------- */

.tt-drei {
    /* !--- INITIALIZATION of visual marker properties */
    --drei-INIT-color-ok: var(--color-state-ok, #BCCF00);
    --drei-INIT-color-warn: var(--color-state-warn, #F6A000);
    --drei-INIT-color-crisis: var(--color-state-crisis, #E84E0F);
    
    --drei-INIT-border-fat: 6px;
    --drei-INIT-border-medium: 4px;
    --drei-INIT-border-thin: 2px;
 
    --drei-INIT-border-evil: solid;
    --drei-INIT-border-severe: dotted;
    --drei-INIT-border-bad: dashed;
    --drei-INIT-border-neutral: groove;
   
   
    /* !--- MARKER outlines: HTML standard violations */
    --drei-mark-html-crisis: var(--drei-INIT-border-fat) var(--drei-INIT-border-evil) var(--drei-INIT-color-crisis);
    --drei-mark-html-warn: var(--drei-INIT-border-fat) var(--drei-INIT-border-evil) var(--drei-INIT-color-warn);
    
    /* !--- MARKER outlines: Accessibility violations */
    --drei-mark-a11y-crisis: var(--drei-INIT-border-medium) var(--drei-INIT-border-severe) var(--drei-INIT-color-crisis);
    --drei-mark-a11y-warn: var(--drei-INIT-border-medium) var(--drei-INIT-border-severe) var(--drei-INIT-color-warn);

    /* !--- MARKER outlines: Framework & product-specific violations */
    --drei-mark-eins-crisis: var(--drei-INIT-border-thin) var(--drei-INIT-border-bad) var(--drei-INIT-color-crisis);
    --drei-mark-eins-warn: var(--drei-INIT-border-thin) var(--drei-INIT-border-bad) var(--drei-INIT-color-warn);
    
    /* !--- MARKER outlines: Voluntary debugging */
    --drei-mark-debugger: var(--drei-INIT-border-medium) var(--drei-INIT-border-neutral) var(--drei-INIT-color-ok);
    
    
    /* !--- DELAYED MARKER outlines: Animations when marker has to offset UI response times (e.g. for AJAX loaders) */
    --drei-INIT-animation-runtime: 0.2s;
    --drei-INIT-animation-delay: 0.7s; /* should be slightly longer than typical AJAX fragment latency */
    
    --drei-animark-html-crisis: drei-INIT-anim-html-crisis var(--drei-INIT-animation-runtime) ease forwards var(--drei-INIT-animation-delay);
    --drei-animark-html-warn: drei-INIT-anim-html-warn var(--drei-INIT-animation-runtime) ease forwards var(--drei-INIT-animation-delay);
    
    --drei-animark-a11y-crisis: drei-INIT-anim-a11y-crisis var(--drei-INIT-animation-runtime) ease forwards var(--drei-INIT-animation-delay);
    --drei-animark-a11y-warn: drei-INIT-anim-a11y-warn var(--drei-INIT-animation-runtime) ease forwards var(--drei-INIT-animation-delay);
    
    --drei-animark-eins-crisis: drei-INIT-anim-eins-crisis var(--drei-INIT-animation-runtime) ease forwards var(--drei-INIT-animation-delay);
    --drei-animark-eins-warn: drei-INIT-anim-eins-warn var(--drei-INIT-animation-runtime) ease forwards var(--drei-INIT-animation-delay);
}

/* !--- Configuration of marker animations */
/* These have to be declared at the page's :root level */
@keyframes drei-INIT-anim-html-crisis {
    100% {outline: var(--drei-mark-html-crisis);}
}

@keyframes drei-INIT-anim-html-warn {
    100% {outline: var(--drei-mark-html-warn);}
}

@keyframes drei-INIT-anim-a11y-crisis {
    100% {outline: var(--drei-mark-a11y-crisis);}
}

@keyframes drei-INIT-anim-a11y-warn {
    100% {outline: var(--drei-mark-a11y-warn);}
}

@keyframes drei-INIT-anim-eins-crisis {
    100% {outline: var(--drei-mark-eins-crisis);}
}

@keyframes drei-INIT-anim-eins-warn {
    100% {outline: var(--drei-mark-eins-warn);}
}

/* !-------------------------------------------- */
/* !DREI Core test module for EXCLUSION
:: Temporary visual overrides */
/* !-------------------------------------------- */

/* !--- Temporary suppression of all test markers */
.tt-drei.drei-override, 
.tt-drei .drei-override {
    --3️⃣-debug-tip: "ℹ️ The class .drei-override prevents all DREI tests from displaying their results.";

    --drei-mark-html-crisis: transparent;
    --drei-mark-html-warn: transparent;
    
    --drei-mark-a11y-crisis: transparent;
    --drei-mark-a11y-warn: transparent;
    
    --drei-mark-eins-crisis: transparent;
    --drei-mark-eins-warn: transparent;
}

/* !--- Temporary suppression of warning-level markers */
.tt-drei.drei-warning-override, 
.tt-drei .drei-warning-override {
    --3️⃣-debug-tip: "ℹ️ The class .drei-warning-override prevents all DREI tests from displaying their results if the results only reach the 'warning' level.";

    --drei-mark-html-warn: transparent;
    
    --drei-mark-a11y-warn: transparent;
    
    --drei-mark-eins-warn: transparent;
}

/* !-------------------------------------------- */
/* !DREI Core test module for EXCLUSION
:: Exclusion of embedded 3rd-party-product: TinyMCE */
/* !-------------------------------------------- */
/* Additional condition for test execution: 
:: DOM subtrees marked with .tox-tinymce (main app) and .tox-tinymce-aux (modal dialogs) */
/* !-------------------------------------------- */

.tox-tinymce, 
.tox-tinymce-aux {
    --3️⃣-source: unset;
    --3️⃣-debug-tip: unset;

    --drei-mark-html-crisis: transparent;
    --drei-mark-html-warn: transparent;
    
    --drei-mark-a11y-crisis: transparent;
    --drei-mark-a11y-warn: transparent;
    
    --drei-mark-eins-crisis: transparent;
    --drei-mark-eins-warn: transparent;
}

/* !-------------------------------------------- */
/* !DREI Core test module
:: Abstract debugging markers */
/* !-------------------------------------------- */

.tt-drei {
    .debug {
        outline: var(--drei-mark-debugger) !important;
        --3️⃣-debug-tip: "ℹ️ The class .debug should only be used for temporary debugging.";
    }
}


/* !-------------------------------------------- */
/* !DREI Core test module
:: Generic malformed HTML tags & constructs */
/* !-------------------------------------------- */

.tt-drei {
    /* !--- HTML tags for headlines */
    /* CRISIS: no nested headlines */
    /* Note: most browsers won't flag this because they dissolve such an illegal structure into siblings */
    :is(h1, h2, h3, h4, h5, h6) :is(h1, h2, h3, h4, h5, h6) {
        outline: var(--drei-mark-html-crisis) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#technical_summary";
        --3️⃣-debug-tip: "🛑 Headline elements must not be nested.";
    }
    
    /* WARN: No empty headlines */
    :is(h1, h2, h3, h4, h5, h6):empty {
        outline: var(--drei-mark-html-warn) !important;
        --3️⃣-debug-tip: "⚠️ A headline should not be empty.";
    }
    
    
    /* !--- HTML tag <p> */
    /* WARN: No empty paragraphs */
    p:empty {
        outline: var(--drei-mark-html-warn) !important;
        --3️⃣-debug-tip: "⚠️ We should not have empty <p> elements.";
    }
    
    /* CRISIS: No nested paragraphs */
    /* Note: many browsers won't flag this because they dissolve such an illegal structure into siblings */
    p p {
        outline: var(--drei-mark-html-crisis) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p#technical_summary";
        --3️⃣-debug-tip: "🛑 <p> elements must not be nested.";
    }
    
    /* CRISIS: No lists inside of paragraphs */
    p:has(:is(ul, ol)) {
        outline: var(--drei-mark-html-crisis) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p#technical_summary";
        --3️⃣-debug-tip: "🛑 <p> elements must not contain <ul> or <ol>. Generally <p> is only allowed to contain HTML children of type phrasing content.";
    }
    
    
    /* !--- HTML tag <button> */
    /* CRISIS: buttons must not contain block-level elements */
    /* TODO: add h1, h2, h3, h4, h5, h6 as illegal children */
    button:has(:is(a, p, div, ul, section, article)) {
        outline: var(--drei-mark-html-crisis) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#technical_summary";
        --3️⃣-debug-tip: "🛑 A <button> must not contain any HTML block-level elements. If needed, we have to construct a special <a> with accessible <button> behavior.";
    }
    
    
    /* !--- HTML tag <img> */
    /* CRISIS: No source file defined */
    img[src=""], 
    img:not([src]) {
        animation: var(--drei-animark-html-crisis);
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#src";
        --3️⃣-debug-tip: "🛑 An <img> must always have a 'src' attribute with a file reference to the image.";
    }
    
    
    /* !--- HTML tags <ul>, <ol>, <li> */
    /* WARN: No lists without any li children */
    :is(ul, ol):not(:has(li)) {
        animation: var(--drei-animark-html-warn);
        --3️⃣-debug-tip: "⚠️ We should not have empty <ul> or <ol>, without <li> children.";
    }
    
    /* CRISIS: Lists with non-<li> children */
    :is(ul, ol) > :not(li) {
        outline: var(--drei-mark-html-crisis) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul#technical_summary";
        --3️⃣-debug-tip: "🛑 <ul> and <ol> must only contain <li> children";
    }
    
    /* CRISIS: No <li> without a direct list parent */
    :not(ul, ol):has(> li) {
        outline: var(--drei-mark-html-crisis) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li";
        --3️⃣-debug-tip: "🛑 <li> must always be direct children of an <ul> or <ol>.";
    }
    
    /* WARN: No empty <li> */
    li:empty {
        outline: var(--drei-mark-html-warn) !important;
        --3️⃣-debug-tip: "⚠️ We should not have emtpy <li> elements.";
    }
    
    
    /* !--- HTML tags <label> */
    /* CRISIS: No label incl. a link (except for truly disabled links) */
    label a:not([aria-disabled="true"]) {
        outline: var(--drei-mark-html-crisis) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#technical_summary";
        --3️⃣-debug-tip: "🛑 <label> must not contain any <a>.";
    }
    
    /* CRISIS: No label with flow elements */
    /* Enable test only when TB-1313 is done
    label :is(p, div, ul, h1, h2, h3, h4, h5, h6) {
        outline: var(--drei-mark-html-crisis) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#technical_summary";
        --3️⃣-debug-tip: "🛑 <label> must not contain any HTML flow content (e.g. <p>, <div>, <ul> or headlines).";
    }
    */
    
    
    /* !--- HTML tags <fielset> and <legend> */
    fieldset fieldset {
        outline: var(--drei-mark-html-crisis) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset";
        --3️⃣-debug-tip: "🛑 <fieldset> containers must not be nested.";
    }
    
    legend:not(fieldset > legend:first-child) {
        outline: var(--drei-mark-html-crisis) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset";
        --3️⃣-debug-tip: "🛑 <legend> is only allowed as the first child of a <fieldset>.";
    }


    /* !--- HTML <table> elements */
    /* WARN: table should contain tbody */
    table:not(:has(tbody)) {
        outline: var(--drei-mark-html-warn) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody";
        --3️⃣-debug-tip: "⚠️ Every <table> should contain at least one <tbody> child.";
    }
    
    /* WARN: table header should only contain th children */
    table thead tr > td {
        outline: var(--drei-mark-html-warn) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead#examples";
        --3️⃣-debug-tip: "⚠️ A <thead> should only contain <th> children.";
    }
    
    
    /* !--- All elements with ID attributes */
    /* CRISIS: No umlauts in IDs */
    :is([id*="ä"], [id*="ü"], [id*="ö"]) {
        outline: var(--drei-mark-html-crisis) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id#syntax";
        --3️⃣-debug-tip: "🛑 ID attributes must not contain German umlauts.";
    }
    
    /* CRISIS: No special characters within IDs */
    :is([id*=" "], [id*="/"], [id*="("], [id*=")"], [id*="["], [id*="]"], [id*="."], [id*=","], [id*=":"], [id*="!"], [id*="$"], [id*="%"], [id*="&"], [id*="="], [id*="?"], [id*="*"], [id*="+"], [id*="#"]) {
        outline: var(--drei-mark-html-crisis) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id#syntax";
        --3️⃣-debug-tip: "🛑 ID attributes must not contain any special characters like spaces, slashes, parantheses etc.";
    }
    
    /* CRISIS: No IDs starting with a digit */
    :is([id^="0"], [id^="1"], [id^="2"], [id^="3"], [id^="4"], [id^="5"], [id^="6"], [id^="7"], [id^="8"], [id^="9"]) {
        outline: var(--drei-mark-html-crisis) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id#syntax";
        --3️⃣-debug-tip: "🛑 ID attributes must not start with a digit.";
    }
}


/* !-------------------------------------------- */
/* !DREI Core test module
:: Violations of accessibility standards and patterns */
/* !-------------------------------------------- */

.tt-drei {
    /* !--- HTML tags <label> */
    /* WARN: No label without a 'for' attribute */
    label:not([for]), 
    label[for=""] {
        outline: var(--drei-mark-a11y-warn) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attributes";
        --3️⃣-debug-tip: "⚠️ Every <label> must have a 'for' attribute containing an ID to its paired <input>. The only exceptions are <label> instances within our .substance-uploader and .substance-richtext-editor constructs.";
    }

    
    /* !--- title and alt attributes */
    /* WARN: no empty title attributes */
    *[title=""] {
        outline: var(--drei-mark-a11y-warn) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title";
        --3️⃣-debug-tip: "⚠️ A 'title' attribute should not be set when it's empty. Empty 'title' attributes can cause undesired effects in screenreaders.";
    }
    
    /* WARN: title attribute should be set on <abbr> elements */
    abbr[title=""], 
    abbr:not([title]) {
        outline: var(--drei-mark-a11y-warn) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr";
        --3️⃣-debug-tip: "⚠️ An <abbr> element without an explaining 'title' attribute is useless and confusing.";
    }

    /* WARN: alt attribute should be set on <img> elements */
    img[alt=""], 
    img:not([alt]) {
        outline: var(--drei-mark-a11y-warn) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#accessibility";
        --3️⃣-debug-tip: "⚠️ An <img> should have an 'alt' attribute describing it in case it's not/slowly loaded or encountered by a screenreader.";
    }


    /* !--- ARIA attributes */
    /* CRISIS: ARIA ID references with CSS ID syntax */
    *[aria-controls*="#"], 
    *[aria-describedby*="#"], 
    *[aria-labelledby*="#"] {
        outline: var(--drei-mark-a11y-crisis) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id#syntax";
        --3️⃣-debug-tip: "🛑 ARIA attributes referencing HTML IDs of other elements must do so by pure string values, not using CSS selector syntax (#idname). Several IDs must be separated by the space character.";
    }
    
    /* WARN: Nested ARIA live regions */
    /* Note: we mark both parent and child */
    *[aria-live="polite"] *[aria-live="polite"], 
    *[aria-live="polite"]:has(*[aria-live="polite"]) {
        outline: var(--drei-mark-a11y-warn) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-live";
        --3️⃣-debug-tip: "⚠️ ARIA Live regions should not be nested and declared as deep in the DOM as possible. Nested ARIA Live regions cause unpredictable results in screenreaders.";
    }
}


/* !-------------------------------------------- */
/* !DREI / Framework-specific test module
:: Websites using the two tribes EINS framework for UI construction
:: Violations of accessibility standards and patterns */
/* !-------------------------------------------- */
/* Additional condition for test execution: 
:: DOM subtrees marked with .tt-eins gateway class */
/* !-------------------------------------------- */

.tt-drei.tt-eins, 
.tt-eins .tt-drei {
    /* !--- COMPONENT: Form components */
    /* WARN: Every form elements needs a label, even if invisible */
    .field-container:not(:has(> label)):not(:has(> :is(input, select, textarea):is([aria-label], [aria-labelledby]))), 
    *:not(.field-container):has(> :is(input:only-child, select:only-child, textarea:only-child)) {
        outline: var(--drei-mark-a11y-warn) !important;
        --3️⃣-debug-tip: "⚠️ Every form element must have a <label> (or alternatively an aria-label or aria-labelledby attribute), even if the label remains invisible in the UI (usage of .field-entry.entry-unlabeled).";
    }
    
    /* WARN: Field entries should be ARIA Live regions */
    .field-entry:not([aria-live="polite"]) {
        outline: var(--drei-mark-a11y-warn) !important;
        --3️⃣-debug-tip: "⚠️ A .field-entry container should be an ARIA Live region because it could throw error messages.";
    }
}


/* !-------------------------------------------- */
/* !DREI / framework-specific test module
:: Websites using the two tribes EINS framework for UI construction
:: Misconfigured EINS baseline UI components */
/* !-------------------------------------------- */
/* Additional condition for test execution: 
:: DOM subtrees marked with .tt-eins gateway class */
/* !-------------------------------------------- */

.tt-drei.tt-eins, 
.tt-eins .tt-drei {
    /* !--- title attribute */
    /* WARN: suspicious values for title or alt attributes */
    *[title="undefined"], 
    *[alt="undefined"], 
    *[title="null"], 
    *[alt="null"], 
    *[title*="object Object"], 
    *[alt*="object Object"] {
        outline: var(--drei-mark-eins-warn) !important;
        --3️⃣-source: unset;
        --3️⃣-debug-tip: "⚠️ These values for the 'title' or 'alt' attribute are suspicious and could indicate a bug in the back-end string generator.";
    }


    /* !--- COMPONENT: Abstract Links & Buttons */

    
    /* !--- COMPONENT: Small actions */
    
    
    /* !--- COMPONENT: View manipulators */
    
    
    /* !--- COMPONENT: Primary action hierarchy */
    /* Missing test: WARN: icon-only buttons should have a mouseover title */
    
    
    /* !--- COMPONENT: Table sorters */
    
    
    /* !--- COMPONENT: Form components */
    /* CRISIS: substance-fieldlist must not be nested */
    .substance-fieldlist .substance-fieldlist {
        outline: var(--drei-mark-eins-crisis) !important;
        --3️⃣-debug-tip: "🛑 .substance-fieldlist must not be nested.";
    }

    /* CRISIS: field-entry must not be nested */
    .field-entry .field-entry {
        outline: var(--drei-mark-eins-crisis) !important;
        --3️⃣-debug-tip: "🛑 .field-entry must not be nested. Instead, .field-entry containers must only be siblings if several are used.";
    }
    
    /* CRISIS: field-container must be part of field-entry */
    .field-container:not(:is(.field-entry > .field-container)) {
        outline: var(--drei-mark-eins-crisis) !important;
        --3️⃣-debug-tip: "🛑 .field-container must always be wrapped within a .field-entry.";
    }
    
    /* CRISIS: multiple field containers only for checkbox/radio groups */
    .field-container + .field-container:not(:is(.checkbox-group .field-container, .radio-group .field-container)) {
        outline: var(--drei-mark-eins-crisis) !important;
        --3️⃣-debug-tip: "🛑 Multiple .field-container instances are only allowed for checkbox & radio groups.";
    }
    
    /* WARN: .field-container.field-action with a missing primary action */
    .field-container.field-action:not(:has(.primary-action)) {
        outline: var(--drei-mark-eins-warn) !important;
        --3️⃣-debug-tip: "⚠️ A .field-container marked with .field-action must contain a .primary-action (a helper button doing something for/with the <input> element).";
    }
    
    /* WARN: radio and checkbox groups need the proper role */
    .field-entry:is(.checkbox-group, .radio-group):not([role="group"]) {
        outline: var(--drei-mark-eins-warn) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/group_role";
        --3️⃣-debug-tip: "⚠️ A .field-entry for groups of radio buttons or checkboxes (marked as .radio-group or .checkbox-group) needs to have the attribute role='group'.";
    }
    
    /* WARN: form elements with no aria-describedby featuring field-comment */
    .field-entry:not(:is(.entry-checkbox, .entry-radio)):has(.field-comment) .field-container *:is(input, select, textarea):not([aria-describedby]) {
        outline: var(--drei-mark-eins-warn) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby";
        --3️⃣-debug-tip: "⚠️ IDs  of .field-comment instances must always be referenced with an aria-describedby attribute on their related form element.";
    }
    
    /* WARN: form elements with aria-describedby must have field-comment instances */
    .field-entry:not(:has(.field-comment)) .field-container *:is(input, select, textarea)[aria-describedby] {
        outline: var(--drei-mark-eins-warn) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby";
        --3️⃣-debug-tip: "⚠️ Usage of aria-describedby on form elements requires at least 1 .field-comment instance as reference point.";
    }
    
    /* CRISIS: No labels outside of .field-container */
    label:not(:is(.field-container label, .substance-progress label)) {
        outline: var(--drei-mark-eins-crisis) !important;
        --3️⃣-debug-tip: "🛑 <label> must not be used outside of .field-container or .substance-progress wrappers.";
    }


    /* !--- COMPONENT: Media container */
    
    
    /* !--- COMPONENT: Tables */
    /* CRISIS: table header cells must only contain sorter buttons or wrapped text */
    .substance-table thead th:not(:empty) > *:not(:is(p, .sort-action)) {
        outline: var(--drei-mark-eins-crisis) !important;
        --3️⃣-debug-tip: "🛑 A column header must only contain a text wrapped in <p> or a sorting action.";
    }
    
    /* WARN: every body cell should contain a proper HTML tag, not naked text */
    .substance-table tbody td:not(:empty) > *:not(:is(p, mark, a, button, div, ul, .substance-placeholder, .substance-id, .substance-timestamp)) {
        outline: var(--drei-mark-eins-warn) !important;
        --3️⃣-debug-tip: "⚠️ A body cell should always contain content which is properly wrapped in an approved HTML tag.";
    }
    
    
    /* !--- COMPONENT: Temporal Object */
    /* WARN: wrong HTML for timestamp */
    .substance-timestamp:not(time), 
    .substance-timestamp:not([datetime]) {
        outline: var(--drei-mark-eins-warn) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time";
        --3️⃣-debug-tip: "⚠️ A .substance-timestamp component must use the <time> HTML tag with a datetime attribute.";
    }
    
    
    /* !--- COMPONENT: Flyouts */
    /* WARN: incomplete flyout containers */
    .substance-flyout:not(:has(.flyout-controller)), 
    .substance-flyout:not(:has(.flyout-host)) {
        outline: var(--drei-mark-eins-warn) !important;
        --3️⃣-debug-tip: "⚠️ A .substance-flyout container must contain a .flyout-controller and a .flyout-host.";
    }

    /* WARN: unwired flyout components */
    .flyout-controller:not(.substance-flyout .flyout-controller), 
    .flyout-host:not(.substance-flyout .flyout-host) {
        outline: var(--drei-mark-eins-warn) !important;
        --3️⃣-debug-tip: "⚠️ .flyout-controller and .flyout-host must be children of a .substance-flyout container.";
    }


    /* !--- ACTOR: nested actors */
    /* CRISIS: actors must never be nested */
    /* Note: we mark both parent and child */
    .actor:has(.actor), 
    .actor .actor {
        outline: var(--drei-mark-eins-crisis) !important;
        --3️⃣-debug-tip: "🛑 Large .actor constructs must never be nested.";
    }
}


/* !-------------------------------------------- */
/* !DREI / Project-specific test module
:: Codebox Transity
:: Misconfigured EINS custom UI constructs */
/* !-------------------------------------------- */
/* Additional condition for test execution: 
:: DOM subtrees marked with .tt-eins gateway class
:: DOM subtrees marked with #transity or #transity-app product ID */
/* !-------------------------------------------- */

#actor_creator.tt-eins.tt-drei, 
#transity.tt-eins.tt-drei, 
#transity .tt-eins.tt-drei, 
#transity .tt-eins .tt-drei, 
#transity-app.tt-eins.tt-drei, 
#transity-app .tt-eins.tt-drei, 
#transity-app .tt-eins .tt-drei {
    /* !--- title and alt attribute */
    /* WARN: title should only bet set for particular tags */
    *[title]:not(a, button, abbr, time, img, .substance-id .id-suffix, .substance-file .file-thumbnail, .substance-entity.entity-icon, .substance-entity.entity-validation, .substance-entity.entity-state, .substance-editor, .substance-timestamp, #actor_incident .history-list .substance-richtext) {
        outline: var(--drei-mark-eins-warn) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title";
        --3️⃣-debug-tip: "⚠️ A 'title' attribute should only be set for interactive elements, <abbr> and <time> tags and some specific .substance-* constructs. When providing mouseover text for <img> elements, make sure you're also using the 'alt' attribute.";
    }

    /* TEST NEUTRALIZATION: In certain contexts we allow <abbr> without a title attribute */
    #actor_creator .block-controller h3 abbr.id-suffix.suffix-point {
        outline: none !important;
        --3️⃣-debug-tip: unset;
    }

    /* TEST NEUTRALIZATION: .substance-timestamp may contain an emtpy title tag until it's fully built out */
    .substance-timestamp[title=""] {
        outline: none !important;
        --3️⃣-debug-tip: unset;
    }
    
    /* TEST NEUTRALIZATION: temporary images within the cropper tool don't need title or alt attributes */
    .substance-file.image-cropping :is(img[alt=""], img:not([alt]), img[title=""], img:not([title])) {
        outline: none !important;
        --3️⃣-debug-tip: unset;
    }
    
    /* TEST NEUTRALIZATION: Transity prototype may use empty title/alt attributes */
    *[title=""]:is(html[data-product] *[title=""]), 
    *[alt=""]:is(html[data-product] img[alt=""]), 
    img:not([alt]):is(html[data-product] img:not([alt])) {
        outline: none !important;
        --3️⃣-debug-tip: unset;
    }
    

    /* !--- COMPONENT: Images & Documents */
    /* Different marker position in case images are fit tightly into their container */
    .substance-file .file-thumbnail img {
        outline-offset: -3px;
    }


    /* !--- COMPONENT: Abstract links and buttons */
    /* WARN: no un-classed links or buttons */
    a:not([class]):not(:focus-visible):not(:is(.creator-form .form-receipt a, .substance-richtext a)),
    a[class=""]:not(:focus-visible):not(:is(.creator-form .form-receipt a, .substance-richtext a)),
    button:not([class]):not(:focus-visible),
    button[class=""]:not(:focus-visible) {
        outline: var(--drei-mark-eins-warn) !important;
        --3️⃣-debug-tip: "⚠️ We shouldn't have <a href> or <button> without any class assigned to it. At least consider using .link-action.";
        
        &:is(.substance-file a) {
            outline-offset: -3px;
        }
    }
    
    
    /* !--- COMPONENT: Expander actions */
    /* CRISIS: .view-action.action-expand is deprecated – only activate when TB-1277 is in progress */
    .view-action.action-expand {
        outline: var(--drei-mark-eins-crisis) !important;
        --3️⃣-debug-tip: "🛑 The class combo .view-action.action-expand is deprecated. It has to be replaced with a single .expand-action.";
    }

    
    /* !--- COMPONENT: Primary action hierarchy */
    /* WARN: icon-only buttons should have a mouseover title */
    /* TODO: actually use .icon-only class and move this test back to generic EINS tests */
    .primary-action.action-size-mini.action-icon:not([title]):not(.tooltip-controller):not(.field-action .primary-action[tabindex="-1"]) {
        outline: var(--drei-mark-eins-warn) !important;
        --3️⃣-debug-tip: "⚠️ A .primary-action (<a> or <button>) showing only an icon needs a 'title' attribute with a descriptive label. In most cases, the enclosed (but invisible) text should be replicated as 'title' attribute.";
    }
    
    /* TEST NEUTRALIZATION: Transity <button> instances may contain illegal children until TB-1028 has been fully resolved
    button:has(:is(h1, h2, h3, h4, h5, h6)) {
        outline: none !important;
        --3️⃣-debug-tip: unset;
    }
    */


    /* !--- COMPONENT: Protected buttons with confirmation dialog */
    
    
    /* !--- COMPONENT: Form components */
    /* TEST NEUTRALIZATION: Prototype may skip ARIA Live regions for .field-entry instances */
    .field-entry:not([aria-live="polite"]):is(html[data-product] .field-entry) {
        outline: none !important;
        --3️⃣-debug-tip: unset;
    }

    /* !--- COMPONENT: Flyouts */
    
    
    /* !--- COMPONENT: Menu-like flyouts */
    /* CRISIS: menu sections only as part of .substance-menu */
    .menu-section:not(.substance-menu .menu-section) {
        outline: var(--drei-mark-eins-crisis) !important;
        --3️⃣-debug-tip: "🛑 .menu-section must only be used as part of a .substance-menu";
    }
    
    /* WARN: primary actions as menu options must be wrapped properly */
    .menu-section > ul > li:not(.molecule.section-action):has(.primary-action:not(:is(.field-action > .primary-action, .entry-file .primary-action, .field-action .substance-protector .primary-action))) {
        outline: var(--drei-mark-eins-warn) !important;
        --3️⃣-debug-tip: "⚠️ .primary-action and .substance-protector instances as direct menu options in .substance-menu must be children of li.molecule.section-action. The only exceptions are helper actions for input fields and uploader actions in our .substance-uploader construct.";
    }
    
    /* WARN: every menu option must be at least a molecule */
    .menu-section > ul > li:not(.molecule) {
        outline: var(--drei-mark-eins-warn) !important;
        --3️⃣-debug-tip: "⚠️ Every <li> wrapping a menu option must be at least .molecule, additional classes are allowed.";
    }
    
    
    /* !--- COMPONENT: Tables */
    /* WARN: all BIG tables should always have one sorted column */
    .substance-table:not(:is(.incident-block .substance-table, .objectcontrol-tools .substance-table, .substance-menu .substance-table)) thead tr:not(:has(> th.col-sorted)), 
    .substance-table:not(:is(.incident-block .substance-table, .objectcontrol-tools .substance-table, .substance-menu .substance-table)) tbody tr:not(:has(> .col-sorted)) {
        animation: var(--drei-animark-eins-warn);
        --3️⃣-debug-tip: "⚠️ A table should always have 1 column which serves as the active sorting marker.";
    }


    /* !--- COMPONENT: vCards */
    
    
    /* !--- COMPONENT: Toolchains */
    
    
    /* !--- COMPONENT: Tab bars */
    
    
    /* !--- COMPONENT: Filter bar */
    
    
    /* !--- COMPONENT: Inline editors */
    /* TEST NEUTRALIZATION: Atomic editors, row selection checkboxes and pseudo wrappers don't have to be ARIA Live regions */
    .field-entry:not([aria-live="polite"]):is(.substance-editor .field-entry, td > .field-entry.entry-checkbox.entry-unlabeled), 
    .field-entry:not([aria-live="polite"]):has(button:only-child) {
        outline: none !important;
        --3️⃣-debug-tip: unset;
    }
        
    
    /* !--- COMPONENT: Images & Documents */
    /* TEST NEUTRALIZATION: We allow nesting of .field-entry in a particular edge case */
    .field-entry .substance-file.image-cropping .field-entry {
        outline: none !important;
        --3️⃣-debug-tip: unset;
    }
    
    /* TEST NEUTRALIZATION: Cropping tool for images may contain a .field-entry without ARIA Live region */
    .substance-file.image-cropping .field-entry:not([aria-live="polite"]) {
        outline: none !important;
        --3️⃣-debug-tip: unset;
    }


    /* !--- COMPONENT: Richtext editors (TinyMCE instances) */
    /* TEST NEUTRALIZATION: Richtext editors may contain an unlinked <label> */
    .substance-richtext-editor ~ :is(label:not([for]), label[for=""]) {
        outline: none !important;
        --3️⃣-debug-tip: unset;
    }
    
    
    /* !--- COMPONENT: Entities */
    /* WARN: entities should always have text content */
    .substance-entity:empty {
        outline: var(--drei-mark-eins-warn) !important;
        --3️⃣-debug-tip: "⚠️ A .substance-entity element should always have text content describing what it means, even if the text content is invisible in the UI.";
    }
    
    
    /* !--- COMPONENT: ID numbers/identifiers for entities etc. */
    
    
    /* !--- COMPONENT: Temporal Object */
    /* WARN: wrong HTML for timestamp */
    .substance-timestamp:not([title]) {
        outline: var(--drei-mark-eins-warn) !important;
        --3️⃣-debug-tip: "⚠️ A .substance-timestamp component must have a 'title' attribute spelling out its content.";
    }
    
    /* WARN: only span children inside a timestamp */
    time.substance-timestamp:has(> *:not(span)) {
        outline: var(--drei-mark-eins-warn) !important;
        --3️⃣-debug-tip: "⚠️ A .substance-timestamp must only contain <span> children.";
    }
    
    
    /* !--- COMPONENT: Counter */
    
    
    /* !--- COMPONENT: Messages & notifications */
    
    
    /* !--- COMPONENT: Communication issues (for arbitrary UI components) */
    
    
    /* !--- COMPONENT: File uploader */
    /* TEST NEUTRALIZATION: Uploaders may contain an unlinked <label> */
    .substance-uploader :is(label:not([for]), label[for=""]) {
        outline: none !important;
        --3️⃣-debug-tip: unset;
    }
    
    
    /* !--- COMPONENT: Structured text (from Markdown sources) */
    /* TEST NEUTRALIZATION: Richtext may contain empty paragraphs since it could come from foreign sources */
    /* TODO: investigate justification of .substance-entity exception */
    .substance-richtext p:not(.substance-entity):empty {
        outline: none !important;
        --3️⃣-debug-tip: unset;
    }
    
    
    /* !--- COMPONENT: Route table */
    /* TEST NEUTRALIZATION: Route tables may contain emtpty <li> since they're acting as table cells */
    .substance-route li:empty {
        outline: none !important;
        --3️⃣-debug-tip: unset;
    }
}

/* !-------------------------------------------- */
/* !DREI / Project-specific test module
:: Codebox Transity
:: Misconfigured Transity actors */
/* !-------------------------------------------- */
/* Additional condition for test execution: 
:: DOM subtrees marked with #transity or #transity-app product ID */
/* !-------------------------------------------- */

#actor_creator.tt-drei, 
#transity.tt-drei, 
#transity .tt-drei, 
#transity-app.tt-drei, 
#transity-app .tt-drei {
    /* !--- ACTOR: missing actors */
    /* CRISIS: ObjectViews without sidebar must have #actor_listcontrol */
    &.stage-objectview #ensemble_main:not(:has(#actor_listcontrol)) {
        animation: var(--drei-animark-eins-crisis);
        --3️⃣-debug-tip: "🛑 An #actor_incident without a sidebar (#actor_list.expression-compact) must still have an #actor_listcontrol.expression-compact.";
    }


    /* !--- ACTOR: Incident data / major blocks */
    /* CRISIS: Incident actor must only be used within an appropriate stage */
    &.stage-listview #actor_incident {
        outline: var(--drei-mark-eins-crisis) !important;
        --3️⃣-debug-tip: "🛑 An #actor_incident must only be used within an ObjectView page, i.e. <body> must have .stage-objectview.";
    }
    
    /* CRISIS: ObjectView must have all defined actors, even if empty
    Test deactivated because the the delayed check is still not catching the presence of #actor_objectcontrol
    &.stage-objectview #ensemble_main:not(:has(#actor_objectcontrol)) {
        animation: var(--drei-animark-eins-crisis);
        --3️⃣-debug-tip: "🛑 An ObjectView must have an #actor_objectcontrol at the right place, even if empty.";
    }
    */
    
    /* WARN: actor must contain exactly one summary block */
    #actor_incident .incident-main .incident-block:first-child:not(.block-summary), 
    #actor_incident .incident-main .incident-block.block-summary ~ .block-summary, 
    #actor_incident .incident-supplement .block-summary {
        outline: var(--drei-mark-eins-warn) !important;
        --3️⃣-debug-tip: "⚠️ An ObjectView must have exactly one instance of .incident-block.block-summary, as first main block.";
    }
    
    /* WARN: no additional divs inside the major ObjectView columns */
    #actor_incident :is(.incident-supplement, .incident-main) > div:not([class]), 
    #actor_incident :is(.incident-supplement, .incident-main) > div[class=""] {
        outline: var(--drei-mark-eins-warn) !important;
        --3️⃣-debug-tip: "⚠️ The children of .incident-main and .incident-supplement must be .incident-block, no additional layers.";
    }
    
    /* WARN: no nesting of ObjectView blocks */
    #actor_incident :is(.incident-supplement, .incident-main) .incident-block .incident-block {
        outline: var(--drei-mark-eins-warn) !important;
        --3️⃣-debug-tip: "⚠️ .incident-block instances must not be nested.";
    }
    
    
    /* !--- ACTOR: Incident data / block content */
    /* WARN: block headlines must have controller wrapper */
    #actor_incident .incident-block > h3 {
        outline: var(--drei-mark-eins-warn) !important;
        --3️⃣-debug-tip: "⚠️ An ObjectView block headline must be wrapped in a div.block-controller.";
    }
    
    /* WARN: blocks with related entities must use a table */
    #actor_incident .block-related .block-controller + *:not(.substance-table) {
        outline: var(--drei-mark-eins-warn) !important;
        --3️⃣-debug-tip: "⚠️ An ObjectView block with .block-related must hold its content in a .substance-table.";
    }
    
    /* WARN: Only key/value lists may use property classes */
    #actor_incident *[class*="property"]:not(:is(.incident-block *, .block-property)) {
        outline: var(--drei-mark-eins-warn) !important;
        --3️⃣-debug-tip: "⚠️ .property-* classes are only allowed for .property-item containers, as part of key/value lists inside an ObjectView block (ul.block-property).";
    }
    
    /* WARN: block property value should always contain a proper HTML tag, not naked text  */
    #actor_incident .block-property .property-value:not(:empty) > *:not(:is(p, mark, a, button, div, ul, .substance-placeholder, .substance-id, .substance-timestamp)) {
        outline: var(--drei-mark-eins-warn) !important;
        --3️⃣-debug-tip: "⚠️ A property value of a block should always contain appropriate HTML wrappers, not naked text.";
    }
    
    /* WARN: empty block property value should use a placeholder component  */
    #actor_incident .block-property .property-value p:empty:only-child, 
    #actor_incident .block-property .property-value:empty {
        outline: var(--drei-mark-eins-warn) !important;
        --3️⃣-debug-tip: "⚠️ Empty property values should use abbr.substance-placeholder (an existing React component) to indicate absence of information.";
    }
    
    /* WARN: block property value should not be a flyout container  */
    #actor_incident .block-property .property-value.substance-flyout {
        outline: var(--drei-mark-eins-warn) !important;
        --3️⃣-debug-tip: "⚠️ A property value container should not double as a flyout container. Rather put a div.substance-flyout inside of it.";
    }
    
    
    /* !--- ACTOR: Incident data / block tools */
    /* WARN: mutator tools are only allowed once in controllers for mutable blocks  */
    .link-mutator:not(#actor_incident .incident-block.block-mutable .block-controller .substance-toolchain .toolchain-link) {
        outline: var(--drei-mark-eins-warn) !important;
        --3️⃣-debug-tip: "⚠️ A .link-mutator wrapper is only allowed once in an ObjectView .block-controller if the .incident-block is also .block-mutable";
    }
    
    
    /* !--- ACTOR: Incident data / mutable blocks */
    /* WARN: mutable block property should only exist within temporarily mutable incident blocks  */
    #actor_incident .block-property.property-mutable:not(.incident-block.block-mutable .block-property.property-mutable) {
        outline: var(--drei-mark-eins-warn) !important;
        --3️⃣-debug-tip: "⚠️ Only blocks which can switch into a temporary editor mode (.incident-block.block-mutable) may contain .block-property.property-mutable. Blocks which stay in editor mode permanently or aren't editable at all don't need .property-mutable.";
    }
    
    
    /* !--- ACTOR: Incident data / attachments block */
    /* CRISIS: Tables in attachments block must have .table-attachments */
    #actor_incident .block-attachments .attachment-view.substance-table:not(.table-attachments) {
        outline: var(--drei-mark-eins-crisis) !important;
        --3️⃣-debug-tip: "🛑 When an ObjectView's attachments block implements view switching, the <table> with the attachments list must have the class .table-attachments.";
    }
    
    
    /* !--- ACTOR: Creator */
    /* Special selector to catch Integration systems where .tt-drei is directly attached to #actor_creator */
    /* TEST NEUTRALIZATION: Receipt for a submitted Creator session is foreign content and may content HTML errors */
    /* We have to spare <a href> because such links often have outline styles for :focus/:focus-visible */
    .creator-form .form-receipt *:not(:is(a:focus, a:focus-visible)), 
    #actor_creator .creator-form .form-receipt *:not(:is(a:focus, a:focus-visible)) {
        outline: none !important;
        --3️⃣-debug-tip: unset;
    }
}