.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: 18 */
/* -------------------------------------------- */
/* 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 0123456789PS) */
@font-face {
    font-family: "JetBrains Mono";
    src: url(../../static/media/jetbrainsmono-regular-webfont.8e401afebf7fc1e1981c.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
}

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

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


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

/* --- Sane box + layout 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;
    }
}


/* --- Initialization of standard HTML tags */
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[title]:hover {
        cursor: help;
    }
}


/* --- Initialization of focus heuristics */
*: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: 129 */
/* -------------------------------------------- */
/* Created by @twotribes, Germany */
/* -------------------------------------------- */
/* StyleSheet Scope: INITIALIZATION FOR INTERNAL & EMBEDDED APPS */
/* -------------------------------------------- */

/* !-------------------------------------------- */
/* !INIT: Central Transity UI properties */
/* !-------------------------------------------- */

.tt-eins {
    /* --- These settings are only valid for Light Mode */
    color-scheme: light;
    
    /* 🎨 --- COLOR: definitions */
    /* ▪️ Transity product colors */
    --transity-sand-100: #675e4f;
    --transity-sand-90-x: #8d867b;
    --transity-sand-90-x-60: rgba(141, 134, 123, 0.6);
    --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;
    --transity-sand-20-x-80: rgba(241, 240, 236, 0.8);
    --transity-sand-20-x-40: rgba(241, 240, 236, 0.4);
    --transity-sand-10-x: #f7f6f4;
    --transity-sand-10-x-90: rgba(247, 246, 244, 0.9);
    --transity-sand-5-x: #fafaf9;
    
    /* Headlines & Accents */
    --transity-red-100: #aa5c50;
    --transity-red-60-x: #8F6E6E; /* only used in user icons (?) */
    
    /* Actions */
    --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;
    
    /* Dashboard */
    --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;
    
    /* Edge colors */
    --transity-black: #000;
    --transity-black-50: rgba(0, 0, 0, 0.5);
    --transity-black-20: rgba(0, 0, 0, 0.2);
    --transity-black-10: rgba(0, 0, 0, 0.1);
    
    --transity-white: #fff;
    --transity-white-70: rgba(255, 255, 255, 0.7);
    --transity-white-60: rgba(255, 255, 255, 0.6);
    --transity-white-50: rgba(255, 255, 255, 0.5);
    --transity-white-40: rgba(255, 255, 255, 0.4);
    --transity-white-30: rgba(255, 255, 255, 0.3);
    
    /* ▪️ 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-state-info: var(--transity-sand-100);
    --transity-state-info-70-x: rgba(227, 222, 212, 0.7); /* needs validation */
    --transity-state-info-20-x: rgba(102, 93, 78, 0.2); /* needs validation */
    
    /* ▪️ Transity workflow colors */
    --transity-flow-orange: #C99400;
    --transity-flow-orange-light: rgba(201, 148, 0, 0.5);
    
    --transity-flow-pink: #BF6185;
    --transity-flow-pink-light: rgba(191, 97, 133, 0.6);
    
    --transity-flow-olive: #888741; /* NOT USED YET */
    --transity-flow-olive-light: rgba(136, 135, 65, 0.5);
    
    --transity-flow-purple: #725b99;
    --transity-flow-purple-light: rgba(114, 91, 153, 0.4);
    
    --transity-flow-violet: #8D7684;
    --transity-flow-violet-light: rgba(141, 118, 132, 0.6);
    
    --transity-flow-green: #8DA484;
    --transity-flow-green-light: rgba(141, 164, 132, 0.7);
    
    --transity-flow-beige: var(--transity-sand-30-x);
    
    --transity-flow-ultrabeige: var(--transity-sand-20-x);
    
    
    /* 🎨 --- COLOR: semantic assignments */
    /* ▪️ Validation states */
    --color-state-info: var(--transity-state-info);
    --color-state-info-light: var(--transity-state-info-70-x);
    --color-state-info-ultralight: var(--transity-state-info-20-x);
    
    --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);
    
    /* ▪️ Workflow states */
    --color-state-open: var(--transity-flow-orange);
    --color-state-open-light: var(--transity-flow-orange-light);
    
    --color-state-transfer: var(--transity-flow-pink);
    --color-state-transfer-light: var(--transity-flow-pink-light);
    
    --color-state-ready: var(--transity-flow-purple);
    --color-state-ready-light: var(--transity-flow-purple-light);
    
    --color-state-progress: var(--transity-flow-violet);
    --color-state-progress-light: var(--transity-flow-violet-light);
    
    --color-state-done: var(--transity-flow-green);
    --color-state-done-light: var(--transity-flow-green-light);
    
    --color-state-archived: var(--transity-flow-beige);
    
    --color-state-requested: var(--transity-flow-ultrabeige);
    --color-state-requested-inverse: var(--transity-white);
    
    
    /* 📃 --- BACKGROUNDS */
    /* ▪️ Standard background colors */
    --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-marker: var(--color-state-warn-light-solid);
    --backcolor-selection: var(--transity-blue-5-x); 
    --backcolor-accent: var(--transity-red-100);
    --backcolor-neutral-white: var(--transity-white);
    
    --backcolor-dark: var(--transity-sand-90-x);
    --backcolor-medium: var(--transity-sand-30-x); /* only used for .sort-action */
    
    /* ▪️ Components: Stage */
    --backcolor-stage: var(--transity-white);

    /* ▪️ Components: Login */
    --backcolor-login-page: #db0; /* depends on default background image, is replaced by client_primary.css */
    --backcolor-login-form: var(--transity-sand-90-x-60);
    --backcolor-login-vendor: var(--transity-sand-20-x-80);
    --backcolor-login-prototype: var(--transity-sand-10-x-90);
    
    /* ▪️ Components: Message boxes (used for .substance-message on phone viewports and .substance-entity.entity-validation with state) */
    --backcolor-message: var(--backcolor-standard);
    
    --backcolor-message-info: var(--color-state-info-light);
    --backcolor-message-ok: var(--color-state-ok-light-solid);
    --backcolor-message-warn: var(--color-state-warn-light-solid);
    --backcolor-message-crisis: var(--color-state-crisis-light-solid);

    /* ▪️ Components: ID suffices */
    --backcolor-id-suffix: var(--transity-sand-20-x);
    --backcolor-id-suffix-inverse: var(--transity-white);
    
    /* ▪️ Components: Overlays */
    --backcolor-overlay: var(--transity-white);
    --backcolor-overlay-transparent: var(--transity-white-60);
    --backcolor-overlay-blocker: var(--transity-sand-20-x-40);
    --backcolor-overlay-blur: blur(10px);
    
    /* ▪️ Components: Menus */
    --backcolor-menu-infoblock: var(--backcolor-standard);
    --backcolor-menu-active: var(--backcolor-standard);
    --backcolor-menu-active-border: var(--line-active);
    --backcolor-menu-hover: var(--backcolor-standard);
    
    /* ▪️ Components: Tables */
    --backcolor-table-sort: var(--backcolor-standard);
    --backcolor-table-row-hover: var(--backcolor-menu-hover); /* only used in .substance-route */

    /* ▪️ Components: Generics */
    --backcolor-nav: var(--backcolor-active);
    --backcolor-header: var(--backcolor-standard);
    --backcolor-footer: var(--backcolor-standard);
    --backcolor-filecontainer: var(--backcolor-standard);
    --backcolor-uploader-progress: var(--transity-state-warn-100);
    --backcolor-uploader-thumbnail: var(--transity-sand-40-x);
    --backcolor-flyout: var(--transity-white); /* note value resolution in --triangle-flyout & --triangle-tooltip */
    --backcolor-bullet: var(--transity-sand-40-x);
    
    /* ▪️ Background gradients */
    --gradient-internal-stripe: var(--transity-black-20);
    --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, var(--transity-white), var(--transity-sand-20-x));
    
    --gradient-tab-bar: linear-gradient(to bottom, var(--transity-white), var(--transity-sand-20-x));
    

    /* 📈 --- LINES */
    /* ▪️ Standard line colors */
    --linecolor-standard: var(--transity-sand-25-x);
    --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-accent: var(--transity-red-100);
    --linecolor-neutral-white: var(--transity-white);

    --line-standard: 1px solid var(--linecolor-standard);
    --line-standard-thick: 2px solid var(--linecolor-standard);
    
    /* ▪️ Semantic lines */
    --line-separator: 1px solid var(--linecolor-light);
    --line-separator-inverse: 1px solid var(--transity-white);
    --line-separator-inverse-thick: 2px solid var(--transity-white);
    --line-separator-menu: 1px solid var(--transity-white-30);
    --line-separator-menu-flyout: var(--line-standard-thick);
    
    --line-signature-width: 6px;
    --line-signature: var(--line-signature-width) solid var(--linecolor-light);
    --line-signature-as-shadow: inset 0 -6px 0 0 var(--linecolor-light);
    --line-signature-active: var(--line-signature-width) solid var(--linecolor-active);
    --line-signature-white: var(--line-signature-width) solid var(--transity-white);
    
    --line-active-width: 8px;
    --line-active: var(--line-active-width) solid var(--linecolor-active);
    
    --outline-contrast: 2px solid var(--transity-white);  /* for lightly colored components on colored backgrounds */

    /* ▪️ Components: Generics */
    --line-flyouthost: 1px solid var(--linecolor-medium); /* note value resolution in --triangle-flyout */
    --line-overlay: 1px solid var(--linecolor-medium);
    --line-tooltip: 1px solid var(--linecolor-accent); /* note value resolution in --triangle-tooltip */
    --line-blockquote: 3px solid var(--linecolor-light);
    
    /* ▪️ Components: Generic tables */
    --table-separator: var(--line-separator);
    --table-head-separator: var(--line-signature);
    --table-head-sticky-separator: var(--line-signature-as-shadow);
    --table-row-active-border: var(--line-active);

    /* ▪️ Components: Route tables */
    --route-stop-separator: var(--line-standard);
    --route-stop-separator-mobile: 1px dashed var(--linecolor-standard);
    --route-stop-active-separator: var(--line-separator-inverse);
    --route-group-separator: 3px solid var(--linecolor-standard);
    --route-group-separator-mobile: 2px solid var(--linecolor-accent);
    
    /* ▪️ Components: Message boxes (used for .substance-message on phone viewports and .substance-entity.entity-validation with state) */
    --linecolor-message-info: var(--color-state-info-ultralight);
    --linecolor-message-ok: var(--color-state-ok-medium);
    --linecolor-message-ok-small: var(--color-state-ok-dark);
    --linecolor-message-warn: var(--color-state-warn-medium);
    --linecolor-message-crisis: var(--color-state-crisis-light);
    
    
    /* ⭐️ --- ICONS: graphical assets */
    /* ▪️ Flyout controller arrows */
    --asset-arrow-flyout: url("data:image/svg+xml,%3Csvg version=%271.1%27 xmlns=%27http://www.w3.org/2000/svg%27 x=%270px%27 y=%270px%27 width=%2714px%27 height=%2714px%27 viewBox=%270 0 14 14%27 style=%27enable-background:new 0 0 14 14;%27 xml:space=%27preserve%27%3E%3Cg id=%27Ebene_1%27%3E%3Cpolyline style=%27fill:%23406696;%27 points=%2711.785,4.395 7,9.605 2.215,4.395%27/%3E%3C/g%3E%3C/svg%3E"); /* fill resolves --transity-blue-100 */
    --asset-arrow-flyout-white: url("data:image/svg+xml,%3Csvg version=%271.1%27 xmlns=%27http://www.w3.org/2000/svg%27 x=%270px%27 y=%270px%27 width=%2714px%27 height=%2714px%27 viewBox=%270 0 14 14%27 style=%27enable-background:new 0 0 14 14;%27 xml:space=%27preserve%27%3E%3Cg id=%27Ebene_1%27%3E%3Cpolyline style=%27fill:%23fff;%27 points=%2711.785,4.395 7,9.605 2.215,4.395%27/%3E%3C/g%3E%3C/svg%3E"); /* fill resolves --transity-white */
    
    /* ▪️ 16x16px Triangle connectors (used for flyouts + tooltips) */
    --asset-triangle-flyout: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 17 17%27%3E%3Cpath d=%27M16.5,0.5 L0.5,0.5 L0.5,16.5 Z%27 fill=%27%23fff%27/%3E%3Cpath d=%27M16.5,0.5 L0.5,0.5 L0.5,16.5%27 fill=%27none%27 stroke=%27%23bfc0c2%27 stroke-width=%271%27/%3E%3C/svg%3E"); /* stroke resolves --line-flyouthost, fill resolves --backcolor-flyout */
    --asset-triangle-tooltip: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 17 17%27%3E%3Cpath d=%27M16.5,0.5 L0.5,0.5 L0.5,16.5 Z%27 fill=%27%23fff%27/%3E%3Cpath d=%27M16.5,0.5 L0.5,0.5 L0.5,16.5%27 fill=%27none%27 stroke=%27%23aa5c50%27 stroke-width=%271%27/%3E%3C/svg%3E"); /* stroke resolves --line-tooltip, fill resolves --backcolor-flyout */

    /* ▪️ Expander chevron */
    --asset-arrow-expand: url("data:image/svg+xml,%3Csvg version=%271.1%27 xmlns=%27http://www.w3.org/2000/svg%27 x=%270px%27 y=%270px%27 width=%2714px%27 height=%2714px%27 viewBox=%270 0 14 14%27 style=%27enable-background:new 0 0 14 14;%27 xml:space=%27preserve%27%3E%3Cg id=%27Ebene_1%27%3E%3Cpolyline style=%27fill:none;stroke:%23aa5c50;stroke-miterlimit:10;%27 points=%270.854,10.046 7,3.954 13.146,10.046%27/%3E%3C/g%3E%3C/svg%3E"); /* fill resolves --transity-red-100 */

    /* ▪️ Actions */
    /* fill: --transity-blue-100 */
    --asset-action-add: url(../../static/media/icon_action_add.9b3dc3d9974757487240.svg);
    --asset-action-add-white: url(../../static/media/icon_action_add_white.cd66213e3ba24f391c02.svg);
    --asset-action-create: url(../../static/media/icon_action_create.f980def587d7cd28c673.svg);
    --asset-action-copy: url(../../static/media/icon_action_copy.6ba1e3caa197555d8ca6.svg);
    --asset-action-download: url(../../static/media/icon_action_download.2d5d256f5b500cbc2973.svg);
    --asset-action-download-white: url(../../static/media/icon_action_download_white.8c6173c52e1c4183c71c.svg);
    --asset-action-upload: url(../../static/media/icon_action_upload.1a527ac0ed40232efb88.svg);
    --asset-action-delete: url(../../static/media/icon_action_delete.6c701eae560ae4eaca76.svg);
    --asset-action-save: url(../../static/media/icon_action_save.9373f384d8f6420b3bbd.svg);
    --asset-action-save-white: url(../../static/media/icon_action_save_white.6a5411904ecbbae45ca3.svg);
    --asset-action-email: url(../../static/media/icon_action_email.22fe0e7d5e590ae48ef8.svg);
    --asset-action-email-idle: url(../../static/media/icon_action_email_idle.837dd03d7499f34ec986.svg);
    --asset-action-cancel: url(../../static/media/icon_action_cancel.fe7f258a6accc4e31fcf.svg);
    --asset-action-cancel-white: url(../../static/media/icon_action_cancel_white.79b0f52768f21c1be3b3.svg);
    --asset-action-calendar: url(../../static/media/icon_action_calendar.95297c7fa2ba15e35105.svg);
    --asset-action-time: url(../../static/media/icon_action_time.85d7f83b4d32381432ab.svg);
    --asset-action-switch: url(../../static/media/icon_action_switch.aaf097f8cb1b38724cd5.svg);
    --asset-action-transfer: url(../../static/media/icon_action_transfer.051b147b7f97349e9aca.svg);
    --asset-action-reload: url(../../static/media/icon_action_reload.bae7a4c78c2308b1efcd.svg);
    --asset-action-edit: url(../../static/media/icon_action_edit.0ec95054b657c42de6b7.svg);
    --asset-action-view-on: url(../../static/media/icon_action_view_on.c6d253a9254c6f0d3ba0.svg);
    --asset-action-view-off: url(../../static/media/icon_action_view_off.fa131c88e744c6cbd69e.svg);
    --asset-action-search: url(../../static/media/icon_action_search.928c23d789d78cd03a24.svg);
    --asset-action-print: url(../../static/media/icon_action_print.968e75ae43ceaace9dfb.svg);
    --asset-action-finish: url(../../static/media/icon_action_finish.bd9609ee850ca5fcb9cb.svg);
    --asset-action-reorder-up: url(../../static/media/icon_action_reorder_up.8c4dc5f8a727af9399c0.svg);
    --asset-action-reorder-down: url(../../static/media/icon_action_reorder_down.ee9f468ddd2bd1754c4d.svg);
    --asset-action-decide-approve: url(../../static/media/icon_action_decide_approve.7bf04f1f2d94e908ab59.svg);
    --asset-action-up: url(../../static/media/icon_action_up.a3d1c6b12756dce70b24.svg);
    
    --asset-action-sort: url(../../static/media/icon_action_sort_black.ac5722b267196a9edb2b.svg);

    /* ▪️ Form elements */
    --asset-select-arrow: var(--asset-arrow-flyout);
    
    /* stroke: --transity-sand-40-x */
    --asset-checkbox-mark-disabled: url(../../static/media/icon_action_save_brown.ae901c7e37f37e3c3fa9.svg);
    --asset-checkbox-mark-checked: var(--asset-action-save-white);
    --asset-checkbox-mark-attention: url(../../static/media/icon_action_check_attention_white.2f448722adb56299e5a9.svg);
    
    /* stroke: --transity-sand-60-x */
    --asset-field-disabled: url(../../static/media/icon_field_disabled.3934464ec8ccb6b2e5f3.svg);
    /* stroke: --transity-sand-30-x */
    --asset-field-search: url(../../static/media/icon_field_search.202d6d9181ea8b125b6e.svg);

    /* ▪️ Images & Documents */
    /* stroke: --transity-sand-100 */
    --asset-placeholder-attachment: url(../../static/media/icon_attachment.8415079add55153e0373.svg);
    --asset-placeholder-image: url(../../static/media/icon_attachment_image.8b95b6d07831d9f515b2.svg);
    --asset-placeholder-file: url(../../static/media/icon_attachment_file.bea84c4af893b17ce80e.svg);

    /* ▪️ Filters */
    /* stroke: --transity-red-100 */
    --asset-filter-types: url(../../static/media/iconsprite_filter_types.af2d2103dab3a0370a4d.svg);

    /* ▪️ Entities */
    /* stroke: --transity-red-100 / fill: --transity-white */
    --asset-incident-operations: url(../../static/media/icon_incident_operations.f9743f502cbaf4892305.svg);
    --asset-incident-reporting: url(../../static/media/icon_incident_reporting.d8b5e899fa1d515c6a3b.svg);
    --asset-incident-sales: url(../../static/media/icon_incident_sales.8325507ebd68714c5c0a.svg);
    --asset-incident-staff: url(../../static/media/icon_incident_staff.7588694884109ef5481a.svg);
    --asset-incident-stop: url(../../static/media/icon_incident_stop.025b92c92c8555a24b6f.svg);
    --asset-incident-vehicle-legacy: url(../../static/media/icon_incident_vehicle.6f110d824c3b3526f9dd.svg); /* not used for the time being */
    --asset-incident-vehicle: url(../../static/media/icon_incident_vehicle_bus.5421b24f32b5e3519d3e.svg);
    --asset-incident-mixed: url(../../static/media/icon_incident_mixed.e3084533f414351195e8.svg);
    
    --asset-guarantee: url(../../static/media/icon_guarantee_generic.0a588dc80706a2e0f66e.svg);
    
    --asset-complaint-generic: url(../../static/media/icon_complaint_generic.b2d08a4a26a0010b770a.svg);
    --asset-complaint-digital: url(../../static/media/icon_complaint_digital.d48510049cc324ab4b02.svg);
    --asset-complaint-operations: url(../../static/media/icon_complaint_operations.2f80271b9979a3f3640d.svg);
    --asset-complaint-service: url(../../static/media/icon_complaint_service.cc91b738109d10f2cf43.svg);
    --asset-complaint-ticket: url(../../static/media/icon_complaint_ticket.a19a93a6b8f6c2bf8ab3.svg);

    --asset-opinion-answer: url(../../static/media/icon_opinion_answer_letter.672f3a16db12e5dde4d8.svg);
    --asset-opinion-action: url(../../static/media/icon_opinion_action_letter.50d889273407b9517081.svg);
    --asset-opinion-information: url(../../static/media/icon_opinion_information_letter.7fa415af3ba3c551e21d.svg);

    --asset-admin-endpoint: url(../../static/media/icon_admin_endpoint.15c010c39f99b581d935.svg);
    --asset-admin-person: url(../../static/media/icon_admin_person.0989ed5859d78092104e.svg);
    --asset-admin-structure: url(../../static/media/icon_admin_structure.47608088d1e248c337fb.svg);
    --asset-admin-content: url(../../static/media/icon_admin_content.f47b6e1adb98a8e85807.svg);
    --asset-admin-email: url(../../static/media/icon_admin_email.f2a298c0e5a40bff5488.svg);
    --asset-admin-constraint: url(../../static/media/icon_admin_constraint.ef29533dbbe9b9550eb2.svg);
    --asset-admin-grid: url(../../static/media/icon_admin_grid.3311ceac0c1f796871eb.svg);
    --asset-admin-organization: url(../../static/media/icon_admin_organization.a8eedb4a02d66242afbd.svg);

    /* ▪️ Navigation */
    /* stroke: --transity-white */
    --asset-navigation-message: url(../../static/media/icon_navigation_message.380520b485490a6128e8.svg);
    --asset-navigation-notification: url(../../static/media/icon_navigation_notification.c3368a4fb28649b54c88.svg);
    --asset-navigation-search: url(../../static/media/icon_navigation_search.e233f9d34d86527f4141.svg);

    /* ▪️ Trip aspects */
    /* stroke: --transity-sand-30-x */
    --asset-trip-staff: url(../../static/media/icon_trip_staff.70ea0660226f8ceaa068.svg);
    --asset-trip-route: url(../../static/media/icon_trip_route.248db76a69ef77efbd01.svg);
    --asset-trip-stop: url(../../static/media/icon_trip_stop.9a1ccdd70cbba40528bc.svg);
    --asset-trip-ticket: url(../../static/media/icon_trip_ticket.f05fc269a2be30a30106.svg);
    --asset-trip-vehicle: url(../../static/media/icon_trip_vehicle_bus.61623c3e499866bd906e.svg);
    --asset-trip-vehicle-legacy: url(../../static/media/icon_trip_vehicle.57d5e4c5b6644bf45517.svg); /* not used for the time being */
    --asset-trip-passenger: url(../../static/media/icon_trip_passenger.83f022385a03c57828d6.svg);

    /* ▪️ States */
    --asset-goodwill-requested: url(../../static/media/icon_goodwill_requested.0bf36e76c91d5e8c296d.svg);
    --asset-goodwill-granted: url(../../static/media/icon_goodwill_granted.510a0e2fcef286258f9f.svg);
    
    --asset-workflow-new: url(../../static/media/icon_workflow_new.fa887d28c99c019b4b32.svg);
    --asset-workflow-request: url(../../static/media/icon_workflow_request.9f9a722d9fa000fb5904.svg);
    --asset-workflow-request-complete: url(../../static/media/icon_workflow_request_complete.52583e4337a69365bcef.svg);
    --asset-workflow-request-working: url(../../static/media/icon_workflow_request_working.d6cf4f4088b954765d70.svg);
    --asset-workflow-progress: url(../../static/media/icon_workflow_progress.b1c8f80fc54e2bc14744.svg);
    --asset-workflow-ready: url(../../static/media/icon_workflow_ready.7c67d3ce193d656f6fe3.svg);
    --asset-workflow-transfer: url(../../static/media/icon_workflow_transfer.b43abadb43728998d01d.svg);
    --asset-workflow-done: url(../../static/media/icon_workflow_finished.071e2ef38adb33c3c2fb.svg);

    --asset-validation-info: url(../../static/media/icon_validation_info.5b8634f0274bf134cbf8.svg);
    --asset-validation-ok: url(../../static/media/icon_validation_ok.5ad815141651a003dd58.svg);
    --asset-validation-warn: url(../../static/media/icon_validation_warning.eff586cc341c8b81d587.svg);
    --asset-validation-crisis: url(../../static/media/icon_validation_crisis.5697c91c77019e1bae21.svg);
    
    --asset-validation-attention: url(../../static/media/icon_validation_attention.f8bf6383fdc987a571f0.svg);
    --asset-validation-attention-red: url(../../static/media/icon_validation_attention_red.aaebf4ae9cf106093d77.svg);
    --asset-validation-suspicious: url(../../static/media/icon_validation_suspicious.3b23b5d6ee7cd9dfbc09.svg);
    --asset-validation-deadline: url(../../static/media/icon_validation_deadline.7cd928c7d1f6c7c7e19e.svg);
    --asset-validation-deadline-red: url(../../static/media/icon_validation_deadline_red.093a32b68ca3579d4991.svg);
    --asset-validation-transferred: url(../../static/media/icon_validation_transferred.4c38373ca6a24791c71e.svg);
    --asset-validation-finished: url(../../static/media/icon_validation_finished.c0f773fd749252ac33f7.svg);
    --asset-validation-created: url(../../static/media/icon_validation_created.a089f45ea4e0564641a5.svg);
    --asset-validation-completed: url(../../static/media/icon_validation_completed.e353d4292d94c7c670b6.svg);
    --asset-validation-answered: var(--asset-validation-finished);
    --asset-validation-locked: url(../../static/media/icon_validation_locked.3a828932208122df5bdc.svg);
    
    --asset-gadget-direction: url(../../static/media/TEMP_icon_arrow.f3c593d44e9b096efe0c.svg);

    /* ▪️ Channels */
    /* stroke: --transity-sand-30-x */
    --asset-channel-analog: url(../../static/media/icon_channel_analog.598fb0061294cc2f4bb3.svg);
    --asset-channel-app: url(../../static/media/icon_channel_app.148796ed07d5c8f6d257.svg);
    --asset-channel-personal: url(../../static/media/icon_channel_personal.0dbf139de486308ec2c7.svg);
    --asset-channel-voice: url(../../static/media/icon_channel_voice.39a2d5e763f98aec7162.svg);
    --asset-channel-web: url(../../static/media/icon_channel_web.d0eb8b57fcd3b5ae3312.svg);
    --asset-channel-email: url(../../static/media/icon_channel_email.1842784f219626dc3791.svg);
    --asset-channel-phone: url(../../static/media/icon_channel_phone.479eb7595d7cc97e0c1d.svg);
    --asset-channel-fax: url(../../static/media/icon_channel_fax.e69b091b320c7a8f1eb8.svg);
    --asset-channel-guarantee: url(../../static/media/icon_channel_guarantee.d1e5f5516376cecfd894.svg);
    --asset-channel-system: url(../../static/media/icon_channel_system.188e5d48cbcf3c1525a9.svg);

    /* ▪️ Users */
    /* stroke: --transity-red-60-x */
    --asset-user: url(../../static/media/icon_user.6e005dc7e7c30ea1cf19.svg);
    --asset-user-recipient: url(../../static/media/icon_user_recipient.f36399fb59e3b472fea6.svg);
    --asset-user-passenger: url(../../static/media/icon_user_passenger.b730967ff71b7ed9d33a.svg);
    --asset-user-system: url(../../static/media/icon_user_system.e58f2640d748062b837c.svg);
    --asset-user-level1: url(../../static/media/icon_user_level1.6b5baf6054b2a22676a1.svg);
    --asset-user-level2: url(../../static/media/icon_user_level2.54d020e5d511d1238a76.svg);
    --asset-user-level3: url(../../static/media/icon_user_level3.a9a2a1ceebc7b3d48d07.svg);
    --asset-user-white: url(../../static/media/icon_user_white.2caa00975e9a031a10ec.svg);

    /* ▪️ Vehicles */
    /* fill: --transity-green-100 */
    --asset-vehicle-generic: url(../../static/media/icon_vehicle_generic.c90a6e7a5b97c6beb88b.svg);
    --asset-vehicle-unknown: url(../../static/media/icon_vehicle_unknown.b941dedad61ed675004e.svg);
    --asset-vehicle-plane: url(../../static/media/icon_vehicle_plane.c74abb817de00160c91c.svg);
    --asset-vehicle-bus: url(../../static/media/icon_vehicle_bus.b836897b4a12d30d0bd9.svg);
    --asset-vehicle-tram: url(../../static/media/icon_vehicle_tram.f4451a1b862fae104104.svg);
    --asset-vehicle-train: url(../../static/media/icon_vehicle_train.67cd6f39a2364215f932.svg);
    --asset-vehicle-monorail: url(../../static/media/icon_vehicle_monorail.bb2d4cb58bcfe21ee10d.svg);
    --asset-vehicle-ship: url(../../static/media/icon_vehicle_ship.634431b135bbbe1573ec.svg);
    --asset-vehicle-cableway: url(../../static/media/icon_vehicle_cableway.744384aa0423d3cd1f82.svg);
    --asset-vehicle-taxi: url(../../static/media/icon_vehicle_taxi.bbf7f83e91df0724f8d9.svg);

    /* ▪️ Product logos */
    --asset-logo-rms: url(../../static/media/logo_rms_solutions.6f1cca2e4f474abcab5e.svg);

    --asset-logo-rms-FM: url(../../static/media/logo_rms_FM.91fa248755a171444b80.svg);
    --asset-logo-rms-VT: url(../../static/media/logo_rms_VT.5e15e457476d085007bb.svg);
    --asset-logo-rms-KT: url(../../static/media/logo_rms_KT.b2034bc5bd6909b05a3c.svg);

    --asset-logo-rms-AM: url(../../static/media/logo_rms_AM.18866fe5ccf5abaff3bf.svg);
    --asset-logo-rms-AM-white: url(../../static/media/logo_rms_AM_white.b39545a03cdb6ffd39b4.svg);
    --asset-logo-rms-wordmark-AM: url(../../static/media/logo_rms_solutions_AM.c1f0037bfa973dd2c80d.svg);
    
    --asset-logo-rms-KM: url(../../static/media/logo_rms_KM.2bd24c9ccd00ac15f569.svg);
    --asset-logo-rms-KM-white: url(../../static/media/logo_rms_KM_white.7707fc23f25cfd8aaabb.svg);
    --asset-logo-rms-wordmark-KM: url(../../static/media/logo_rms_solutions_KM.0900d6f1cd5755af9d8c.svg);
    
    --asset-logo-rms-PM: url(../../static/media/logo_rms_PM.17c6c5b1b427d38f7f8e.svg);
    --asset-logo-rms-PM-white: url(../../static/media/logo_rms_PM_white.b52736557f67b735a79a.svg);
    --asset-logo-rms-wordmark-PM: url(../../static/media/logo_rms_solutions_PM.a53decd647817221cb94.svg);
    
    --asset-logo-rms-Admin-white: url(../../static/media/logo_rms_Admin_white.4c68db241678804e50ac.svg);
    --asset-logo-rms-wordmark-Admin: url(../../static/media/logo_rms_solutions_Admin.971a9a6930ecf96338da.svg);
    --asset-logo-rms-wordmark-Admin-white: url(../../static/media/logo_rms_solutions_Admin_white.332a29121f4e4f9f038e.svg);
    
    --asset-logo-cbx-dark: url(../../static/media/logo_codebox_dark.ad4e4b48d9db98550f63.svg);
    

    /* ⭐️ --- ICONS: Dimensions */
    /* ▪️ Flyout controller arrows */
    --icon-flyout-size: 14px;
    --icon-flyout-padding: 16px;
    --icon-flyout-inset: 0px;
    
    /* ▪️ Expander chevron */
    --icon-chevron-size: 14px;

    /* ▪️ Entites */
    --icon-entity-size: 24px;
    --icon-entity-size-small: 17px;
    --icon-entity-size-big: 42px; /* review background-size 40px */
        
    --icon-entity-size-small-margin: 3px;
    --icon-entity-size-small-margin-top: 1px;

    --icon-entity-incident-margin: 6px;
    --icon-entity-incident-margin-big: 6px;
    --icon-entity-incident-margin-big-top: 6px;
    
    --icon-entity-guarantee-margin: 4px;
    --icon-entity-guarantee-margin-big: 6px;
    --icon-entity-guarantee-margin-big-top: 1px;
    
    --icon-entity-complaint-margin: 6px;
    --icon-entity-complaint-margin-big: 6px;
    --icon-entity-complaint-margin-big-top: 2px;

    --icon-entity-opinion-margin: 6px;
    --icon-entity-opinion-margin-big: 6px;
    --icon-entity-opinion-margin-big-top: 2px;
    
    --icon-entity-report-margin: 6px;
    --icon-entity-report-margin-big: 8px;
    --icon-entity-report-margin-big-top: 3px;
    
    --icon-entity-admin-margin: 8px;
    --icon-entity-admin-margin-big: 8px;
    --icon-entity-admin-margin-big-top: 3px;

    /* ▪️ Explanatory icons */
    --icon-trip-size: 22px;
    --icon-vehicle-size: 22px;
    --icon-user-size: 22px;
    --icon-attachment-size: 22px;
    --icon-goodwill-size: 22px;
    --icon-channel-size: 22px;
    --icon-validation-size: 20px;
    --icon-state-size: 16px;
    --icon-combobox-search-size: 10px;
    
    /* ▪️ Action icons */
    --icon-action-size: 20px;
    
    /* ▪️ Environment markers */
    --icon-environment-size: 26px;
    
    /* ▪️ RMS product logos */
    --logo-rms-container-width: 100px;
    --logo-rms-admin-container-width: 180px;
    /* client primary skins can set their own logo width property */


    /* 🔗 --- BUTTONS & LINKS */
    /* ▪️ Dimensions */
    --button-primary-height: 40px;
    --button-primary-padding-horizontal: 20px;
    
    --button-secondary-height: 30px;
    --button-secondary-padding-horizontal: 6px;
    
    --button-secondary-width-minimum: var(--button-secondary-height); /* modified by internal Creators */
    --button-secondary-width-atomic: 50px;
    
    --button-menu-height: 34px;
    --button-menu-padding-horizontal: 15px;
    --button-menu-icon-width: 60px;
    --button-menu-icon-width-reduced: 44px;
    
    --button-sort-height: auto;
    --button-sort-radius: 0;
    --button-sort-padding: var(--table-head-padding);

    --tab-bar-height: var(--button-primary-height);
    --tab-bar-button-menu-padding-horizontal: 20px;
    --tab-bar-embedded-height: var(--button-secondary-height);
    --tab-bar-embedded-button-menu-padding-horizontal: 6px;
    
    /* ▪️ Typography */
    --button-primary-textset: var(--textset-plus-s);
    --button-primary-transform: uppercase;
    --button-secondary-textset: var(--font-weight-medium) var(--font-size-m) var(--font-base);
    --button-secondary-transform: none;
    --button-tertiary-textset: var(--textset-m);
    
    --button-menu-textset: var(--textset-m);
    --button-menu-transform: uppercase;
    --button-menu-active-weight: var(--font-weight-black);
    
    --button-tab-textset: var(--button-menu-textset);
    --button-tab-active-weight: var(--button-menu-active-weight);
    --button-tab-embedded-textset: var(--font-weight-regular) var(--font-size-s) var(--font-base);

    --button-filter-title-textset: var(--font-weight-medium) var(--font-size-plus-s) var(--font-base);
    --button-filter-title-transform: uppercase;
    --button-filter-title-active-weight: var(--font-weight-bold);
    --button-filter-criterion-active-weight: var(--font-weight-bold);

    --button-sort-textset: var(--textset-plus-s);
    --button-sort-neutral-weight: var(--font-weight-bold);
    
    --button-uploader-textset: var(--textset-plus-m);

    /* ▪️ :focus-visible markers */
    --focus-outlinecolor: var(--transity-blue-100);
    --focus-outlinecolor-disabled: var(--linecolor-medium);
    
    --focus-outline-standard: 1.5px dashed var(--focus-outlinecolor);
    --focus-outline-disabled: 1.5px dashed var(--focus-outlinecolor-disabled);
    --focus-outline-inverse: 1.5px dashed var(--transity-white);
    --focus-outline-accent: 1.5px dashed var(--linecolor-accent);
    
    /* ▪️ Key colors */
    --button-back-simple: var(--transity-blue-5-x);
    
    --gradient-button: linear-gradient(to top, var(--button-back-simple), var(--transity-white));
    --gradient-button-hover: linear-gradient(to top, var(--button-back-simple), var(--button-back-simple));
    
    --gradient-button-solid: linear-gradient(to top, var(--transity-blue-100), var(--transity-blue-50-x-solid));
    --gradient-button-solid-hover: linear-gradient(to top, var(--transity-blue-100), var(--transity-blue-100));
    
    /* ▪️ Primary action buttons */
    --button-primary-text-color: var(--transity-blue-100);
    --button-primary-text-color-hover: var(--transity-black);
    --button-primary-solid-text-color: var(--textcolor-inverse);
    --button-primary-solid-text-color-hover: var(--textcolor-inverse);
    
    --button-primary-border: 1px solid var(--transity-blue-100);
    --button-primary-solid-border: 1px solid var(--transity-blue-100);
    --button-primary-border-hover: 1px solid var(--transity-black);

    --button-primary-back: var(--gradient-button);
    --button-primary-back-hover: var(--gradient-button-hover);
    --button-primary-solid-back: var(--gradient-button-solid);
    --button-primary-solid-back-hover: var(--gradient-button-solid-hover);
    
    /* ▪️ Secondary action buttons (inheritance from primary if property not set) */
    --button-secondary-text-color: var(--button-primary-text-color);
    --button-secondary-text-color-hover: var(--button-primary-text-color-hover);
    --button-secondary-solid-text-color: var(--textcolor-inverse);
    --button-secondary-solid-text-color-hover: var(--textcolor-inverse);

    --button-secondary-border: 1px solid var(--transity-blue-10);
    --button-secondary-solid-border: var(--button-secondary-border);
    --button-secondary-view-border: 1px solid var(--transity-blue-20);
    --button-secondary-inverse-border: 1px solid var(--transity-white);
    --button-secondary-border-hover: 1px solid var(--transity-black);
    --button-secondary-solid-border-hover: var(--button-secondary-border-hover);
    
    --button-secondary-back: var(--button-back-simple);
    --button-secondary-back-hover: var(--transity-white);
    --button-secondary-solid-back: var(--gradient-button-solid);
    --button-secondary-solid-back-hover: var(--gradient-button-solid-hover);

    /* ▪️ Tertiary action buttons */
    --button-tertiary-text-color: var(--transity-blue-100);
    --button-tertiary-text-color-hover: var(--transity-black);
    
    /* ▪️ Sort actions for tables */
    --button-sort-text-color: var(--transity-black);
    --button-sort-back-active: var(--backcolor-medium);
    --button-sort-back-hover: var(--backcolor-standard);
    
    /* ▪️ Menu buttons */
    --button-menu-text-color: var(--textcolor-inverse);
    --button-menu-back-hover: var(--transity-sand-70-x);
    --button-menu-back-active: var(--transity-sand-70-x); /* currently only used in client primary skins */

    /* ▪️ Tab bars (embeds .menu-action which handles text colors) */
    --tab-text-color: var(--link-text-color);
    --tab-counter-text-color: var(--tab-text-color);
    --tab-active-text-color: var(--textcolor-inverse);
    
    --tab-bar-back: var(--gradient-tab-bar);
    --tab-bar-embedded-back: var(--backcolor-medium);
    --tab-bar-border: 2px solid var(--linecolor-active);
    
    --tab-bar-divider-bordercolor: var(--transity-white);
    
    --tab-border: 1px solid transparent;
    --tab-active-border: 1px solid var(--linecolor-active);
    --tab-border-hover: 1px solid var(--linecolor-active);
    --tab-embedded-border: 1px solid var(--linecolor-medium);
    --tab-embedded-border-hover: 1px solid var(--linecolor-medium);

    --tab-back: transparent;
    --tab-back-hover: var(--transity-white);
    --tab-embedded-back: transparent; /* not used yet */
    --tab-embedded-back-hover: var(--transity-white);
    --tab-active-back: var(--gradient-nav-main);
    --tab-active-back-hover: var(--button-menu-back-hover);
    
    /* ▪️ List filters */
    --button-filter-title-color: var(--textcolor-accent);

    /* ▪️ Abstract links (placed on containers with interaction states) */
    --link-text-color: var(--transity-black);
    --link-text-color-hover: var(--transity-black);
    
    --link-id-back: var(--backcolor-neutral-white);
    --link-id-back-hover: var(--backcolor-medium);
    
    --link-id-border: var(--line-separator);

    --link-text-richtext-weight: var(--font-weight-bold);
    --link-text-richtext-color: var(--textcolor-standard);
    --link-text-richtext-color-hover: var(--transity-black);
    --link-text-richtext-decoration: none;
    --link-text-richtext-symbol: "→\00a0";
    
    /* ▪️ Expanders */
    --expand-text-color: var(--textcolor-accent);
    --expand-text-color-active: var(--expand-text-color);
    --expand-text-color-hover: var(--transity-black);
    --expand-text-color-active-hover: var(--expand-text-color-hover);
    
    /* ▪️ 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);
    
    /* ▪️ Field comments */
    --field-comment-textcolor: var(--textcolor-standard);
    --field-comment-textcolor-validated: var(--textcolor-emphasis);
    --field-comment-validated-width: 2px;

    /* ▪️ Planar text-based elements */
    --field-textcolor: var(--textcolor-standard);
    --field-textcolor-focus: var(--transity-black);
    --field-textcolor-disabled: var(--textcolor-standard);
    
    --field-backcolor: var(--backcolor-standard);
    --field-backcolor-hover: var(--transity-white);
    --field-backcolor-focus: var(--transity-white);
    --field-backcolor-disabled: transparent;
    
    --field-border-width: 1px;
    --field-border-validated-width: 1px 1px 1px 1px;
    --field-border: var(--field-border-width) solid var(--field-bordercolor);

    --field-bordercolor: var(--linecolor-standard);
    --field-bordercolor-hover: var(--linecolor-light);
    --field-bordercolor-focus: var(--linecolor-standard) var(--linecolor-standard) var(--transity-blue-100) var(--linecolor-standard);
    --field-bordercolor-disabled: transparent transparent var(--linecolor-standard) transparent;
    
    /* ▪️ Set for colored backgrounds: Planar text-based elements */
    --colorpane-field-backcolor: var(--backcolor-neutral-white);
    --colorpane-field-bordercolor-hover: var(--linecolor-active);
    --colorpane-field-bordercolor-disabled: transparent transparent var(--linecolor-light) transparent;

    /* ▪️ Small binary elements */
    --option-textcolor: var(--textcolor-standard);
    --option-textcolor-hover: var(--transity-black);
    --option-textcolor-active: var(--transity-black);
    
    --option-backcolor: var(--transity-blue-5-x);
    --option-backcolor-checked: var(--transity-blue-100);
    --option-backcolor-checked-attention: var(--transity-state-crisis-100);
    --option-backcolor-hover: var(--transity-white);
    --option-backcolor-checked-hover: var(--transity-black);
    --option-backcolor-disabled: var(--backcolor-standard);
    
    --option-backcolor-marker: var(--transity-white);
    --option-backcolor-disabled-marker: var(--backcolor-dark);
    
    --option-bordercolor: var(--transity-blue-70);
    --option-bordercolor-toggle-rail: var(--transity-blue-20);
    --option-bordercolor-hover: var(--transity-black);
    --option-bordercolor-active: var(--transity-blue-10);
    --option-bordercolor-disabled: var(--linecolor-light);
    --option-bordercolor-attention: var(--transity-black-20);

    
    /* ☑️ 📐 --- FORM COMPONENTS: dimensions, distances & typography */
    /* ▪️ Basic dimensions */
    --field-height: 30px;
    --field-height-textarea-initial: calc(2 * var(--field-height));
    --field-height-mobile: 36px;
    --field-height-label: calc(1lh + 4px);
    --field-padding: 4px;
    --field-padding-textarea: var(--field-padding);
    --field-radius: var(--radius-interaction);
    --field-radius-disabled: 0;
    
    --field-width-disabled: 14px;
    --field-width-search: 22px;
    
    /* ▪️ Radio/Checkbox dimensions */
    --option-size: 18px;
    --option-radius: var(--radius-interaction);
    --option-padding: 26px;
    --option-padding-disabled: 40px;
    
    /* ▪️ Checkbox toggle switch dimensions */
    --option-toggle-height: 22px;
    --option-toggle-width: 40px;
    
    /* ▪️ Fieldlists */
    --field-entry-margin: 17px;
    
    /* ▪️ Typography */
    --field-label-textset: var(--font-weight-medium) var(--font-size-m) var(--font-base);
    --field-label-textset-mobile: var(--font-weight-medium) var(--font-size-plus-m) var(--font-base);
    --field-label-optional-weight: var(--font-weight-regular);
    
    --field-value-textset: var(--textset-m);
    --field-value-textset-mobile: var(--textset-l);
    --field-option-value-textset: var(--textset-m);
    
    --field-comment-textset: var(--font-weight-regular) var(--font-size-s) var(--font-base);
    --field-comment-textset-mobile: var(--font-weight-regular) var(--font-size-plus-s) var(--font-base);
    --field-comment-error-weight: var(--font-weight-bold);

    /* Defined on a deeper level in substances_small.css:
    --option-offset
    --checkbox-mark-size
    --radio-checkball-inset
    */
    
    
    /* 🖼️ --- CONTAINERS */
    /* ▪️ Counter chips */
    --chip-counter-height: 21px;
    --chip-counter-height-tab: 18px;
    --chip-counter-padding-horizontal: 8px;
    --chip-counter-mini-padding-horizontal: 4px;

    --chip-counter-textset: var(--font-weight-bold) var(--font-size-m) var(--font-base);
    --chip-counter-textset-tab: var(--font-weight-bold) var(--font-size-s) var(--font-base);
    --chip-counter-textset-bubble: var(--font-weight-black) var(--font-size-micro) var(--font-base);
    
    --chip-counter-text-color: var(--textcolor-inverse);
    --chip-counter-text-color-light: var(--textcolor-accent);
    --chip-counter-text-color-zero: var(--textcolor-dimmed);
    --chip-counter-text-color-bubble: var(--textcolor-emphasis);

    --chip-counter-backcolor: var(--transity-sand-100);
    --chip-counter-backcolor-dominant: var(--backcolor-accent);
    --chip-counter-backcolor-light: var(--backcolor-neutral-white);
    
    --chip-counter-backcolor-state-ok: var(--color-state-ok);
    --chip-counter-backcolor-state-warn: var(--color-state-warn);
    --chip-counter-backcolor-state-crisis: var(--color-state-crisis);
    
    --chip-counter-backcolor-hover: var(--chip-counter-backcolor);
    --chip-counter-backcolor-light-hover: var(--button-secondary-back-hover);
    
    --chip-counter-bordercolor: transparent;
    --chip-counter-bordercolor-light: var(--linecolor-accent);
    --chip-counter-bordercolor-zero: var(--linecolor-light);

    /* ▪️ ID Chips */
    --chip-id-linked-height: 22px;
    --chip-id-linked-height-large: 25px;
    
    /* ▪️ Workflow state Chips */
    --chip-state-height: 22px;
    --chip-state-text-padding: 5px;
    --chip-state-icon-pane: calc(var(--icon-state-size) + 1px);
    --chip-state-icon-only-width: 17px;
    
    --chip-state-textset: var(--font-weight-regular) var(--font-size-plus-s) var(--font-base);
    
    /* ▪️ Validation Chips */
    --chip-validation-height: 19px;
    --chip-validation-height-big: 24px;
    
    --chip-validation-textset: var(--font-weight-bold) var(--font-size-micro) var(--font-base);
    --chip-validation-textset-big: var(--font-weight-bold) var(--font-size-m) var(--font-base);
    --chip-validation-transform: uppercase;

    /* ▪️ Timestamps & dunning */
    --timestamp-weight-default: var(--font-weight-regular);
    --timestamp-weight-emphasis: var(--font-weight-medium);
    --timestamp-weight-due: var(--font-weight-bold);
    --timestamp-weight-overdue: var(--font-weight-black);
    
    --timestamp-compact-prefix-textset: var(--font-weight-medium) var(--font-size-l) var(--font-base);

    /* ▪️ Table typography */
    --table-head-textset: var(--button-sort-textset);
    --table-head-text-color: var(--textcolor-emphasis);
    
    --table-body-textset: var(--textset-m);
    --table-body-text-color: var(--textcolor-standard);

    /* ▪️ Standard tables */
    --table-head-padding: 10px 10px 10px 10px;

    --table-body-padding-vertical: 14px;
    --table-body-padding-vertical-s: 10px;
    --table-body-padding-vertical-xs: 8px;
    --table-body-padding: var(--table-body-padding-vertical) 10px var(--table-body-padding-vertical) 10px;

    /* ▪️ Route tables */
    --table-route-head-textset: var(--textset-plus-s);
    --table-route-body-textset: var(--textset-m);
    --table-route-body-textset-mobile: var(--textset-plus-m);
    --table-route-body-helper-textset: var(--textset-plus-s);
    --table-route-body-helper-textset-mobile: var(--textset-plus-m);
    --table-route-body-essentials-textset-mobile: var(--textset-l);
    
    --table-route-emphasis-weight: var(--font-weight-bold);
    --table-route-active-weight: var(--font-weight-bold);

    --table-route-head-padding: 0 10px 15px 10px;

    --table-route-body-padding: 5px 0 5px 10px;

    /* ▪️ Box frames */
    --radius-interaction: 3px;
    --radius-panel: 5px;
    --radius-chip: 5px;
    --radius-counter: calc(var(--chip-counter-height) / 2);
    
    /* ▪️ 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 var(--transity-black-20);
    --shadow-hard-tight: 0 0 5px var(--transity-black-20);

    --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.1s 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;
    
    /* ▪️ Components */
    --transition-sidebar: color 0.3s ease, padding 0.3s ease, left 0.3s ease;
    --transition-overlay: left 0.5s ease;
    

    /* 🔠 --- TYPOGRAPHY */
    /* ▪️ Text colors */
    --textcolor-init: var(--transity-black);
    
    --textcolor-standard: var(--transity-sand-100);
    --textcolor-accent: var(--transity-red-100);
    --textcolor-dimmed: var(--transity-sand-30-x);
    --textcolor-emphasis: var(--transity-black);
    --textcolor-inverse: var(--transity-white);
    
    --textcolor-dashboard-time: var(--transity-green-100);
    --textcolor-dashboard-criteria: var(--transity-yellow-100);
    
    --textcolor-comment: var(--transity-green-50-x);
    
    /* ▪️ Baseline font */
    --font-base: "Aileron", "Helvetica", "Arial", sans-serif;
    --font-id: "JetBrains Mono", ui-monospace;
    
    /* ▪️ Size cadence */
    --font-size-micro: 10px/13px;
    --font-size-s: 11px/14px;
    --font-size-plus-s: 12px/15px;
    
    --font-size-m: 13px/16px;
    --font-size-plus-m: 14px/19px;
    
    --font-size-minus-l: 15px/20px;
    --font-size-l: 16px/21px;
    --font-size-plus-l: 18px/23px;
    --font-size-xl: 20px/31px;
    --font-size-xxl: 26px/33px;

    /* ▪️ Weight mapping */
    --font-weight-light: 200;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --font-weight-black: 800;

    /* ▪️ Common textsets */
    --textset-micro: var(--font-weight-bold) var(--font-size-micro) var(--font-base);
    --textset-s: var(--font-weight-bold) var(--font-size-s) var(--font-base);
    --textset-plus-s: var(--font-weight-bold) var(--font-size-plus-s) var(--font-base);

    --textset-m: var(--font-weight-regular) var(--font-size-m) var(--font-base);
    --textset-plus-m: var(--font-weight-regular) var(--font-size-plus-m) var(--font-base);
    
    --textset-minus-l: var(--font-weight-regular) var(--font-size-minus-l) var(--font-base);
    --textset-l: var(--font-weight-regular) var(--font-size-l) var(--font-base);
    --textset-plus-l: var(--font-weight-light) var(--font-size-plus-l) var(--font-base);
    --textset-xl: var(--font-weight-light) var(--font-size-xl) var(--font-base);
    --textset-xxl: var(--font-weight-light) var(--font-size-xxl) var(--font-base);
    
    /* ▪️ Letter spacing */
    --spacing-env-marker: 0.07em;
    --spacing-button-menu: 2px;
    --spacing-button-primary: 2px;
    --spacing-masthead: 0;
    --spacing-subhead: 0.5px;
    --spacing-filter: 0.06em;
    --spacing-filter-active: 0.08em;
    --spacing-state-small: 0.03em;
    --spacing-state-medium: 0.05em;
    --spacing-state-large: 0.07em;

    /* ▪️ Text shadows */
    --shadow-text-env-marker: 0 0 10px var(--transity-white);
    --shadow-text-env-marker-dark: 0 0 10px var(--transity-sand-100);
    
    /* ▪️ Message boxes */
    --message-head-textset: var(--font-weight-medium) var(--font-size-minus-l) var(--font-base);
    --message-head-textcolor: var(--textcolor-standard);
    --message-head-textcolor-mobile: var(--textcolor-emphasis);
    
    --message-body-textset: var(--textset-m);
    --message-body-textcolor: var(--textcolor-standard);
    --message-body-textcolor-mobile: var(--textcolor-emphasis);

    /* ▪️ Headlines */
    --masthead-textset: var(--textset-xxl);
    --masthead-textset-emphasis-weight: var(--font-weight-medium);
    --masthead-textcolor: var(--textcolor-accent);
    
    --subhead-textset: var(--font-weight-bold) var(--font-size-m) var(--font-base);
    --subhead-textcolor: var(--textcolor-accent);
    --subhead-transform: uppercase;
    
    --product-ad-textset: var(--textset-plus-s);
    --product-ad-textset-emphasis-weight: var(--font-weight-medium);
    --product-ad-textset-sku-weight: var(--font-weight-bold);


    /* 💬 --- STRINGS */
    --env-marker-dev: "DEV";
    --env-marker-mirror: "MIRROR";
    --env-marker-qa: "QA";
    --env-marker-rtp: "RTP";
    
    --field-optional-suffix: " (optional)";
    

    /* 📦 --- PAGE LAYOUT */
    /* ▪️ Default widths */
    --site-gutter: 50px;
    --site-gutter-mobile: 16px;
    
    --site-width-minimum: 1340px;
    --site-width-maximum: 1920px;
    /* Tablets get initialized to 1600px static viewport width via <meta> directive in <head> */
    
    --site-width: clamp(var(--site-width-minimum), calc(100dvw - (2 * var(--site-gutter))), var(--site-width-maximum));
    
    /* ▪️ Central headers */
    --main-top-padding: 0px;
    
    --main-navigation-height: 50px;
    --main-header-height: 85px;
    --main-ensemble-gutter: 10px;
    
    --logo-width-maximum: 140px;
    --header-logo-gutter: 40px;
    
    /* ▪️ Central footers */
    --main-bottom-padding: 0px;

    /* ▪️ ObjectView controllers */
    --objectcontrol-height: 40px;
    
    /* ▪️ ObjectView sidebar */
    --sidebar-gutter: 20px;

    --sidebar-width-minimum: 210px;
    --sidebar-width-missing: 180px; /* 40px more than maximum logo width */
    --sidebar-width-collapsed: 135px;
    --sidebar-width-maximum: 340px;
    
    --sidebar-width: clamp(var(--sidebar-width-minimum), calc(var(--site-width) * 0.2), var(--sidebar-width-maximum));
    
    /* ▪️ Message boxes */
    --message-width-maximum: 720px;

    /* ▪️ Flyouts */
    --tooltip-radius: var(--radius-panel);

    --flyout-radius: var(--radius-panel);
    --flyout-width-minimum: 280px;
    --flyout-width-standard: 340px;
    --flyout-width-medium: 530px;
    --flyout-width-maxi: 720px;
    --flyout-width-mega: var(--site-width-minimum);
    
    --dialog-email-preview-width-minimum: 530px; /* equals ~75 characters */
    --dialog-email-preview-width-maximum: 720px; /* equals ~111 characters */
    --dialog-email-preview-width: clamp(var(--dialog-email-preview-width-minimum), calc(var(--site-width) * 0.33), var(--dialog-email-preview-width-maximum));

    --dialog-texteditor-width-minimum: 720px; /* equals ~112 characters */
    --dialog-texteditor-width-maximum: 1060px; /* equals ~174 characters */
    --dialog-texteditor-width: clamp(var(--dialog-texteditor-width-minimum), calc(var(--site-width) * 0.45), var(--dialog-texteditor-width-maximum));
    
    --flyout-sidebar-width: var(--flyout-width-minimum);
    
    /* ▪️ Overlay window */
    --overlay-width-minimum: 680px; /* Breakpoint of major @media query */
    --overlay-width-maximum: var(--site-width-minimum);
    --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: 1340px
    Usage: 1st adaption of layout + navigation for small tablets
    
    Viewport Breakpoint 2: 680px
    Usage: full mobile page + component layout
    */
}


/* !-------------------------------------------- */
/* !INIT / DARK MODE: Change color scheme */
/* !-------------------------------------------- */

.tt-eins.stage.dark-enabled:not(.skin), 
.tt-eins.transity-embed.dark-enabled {
    /* --- These settings are only valid for Dark Mode */
    color-scheme: dark;

    /* 🎨 --- COLOR: definitions */
    /* ▪️ Transity product colors (Inverted & Adjusted) */
    --transity-sand-100: #f7f6f4;
    --transity-sand-90-x: #e2dcd2;
    --transity-sand-90-x-60: rgba(226, 220, 210, 0.6);
    --transity-sand-70-x: #bfc0c2;
    --transity-sand-60-x: #b4a48b;
    --transity-sand-50-x: #a78c88;
    --transity-sand-45-x: #927e5e;
    --transity-sand-40-x: #8d867b;
    --transity-sand-30-x: #675e4f;
    --transity-sand-25-x: #4a443a;
    --transity-sand-20-x: #2d2a26;
    --transity-sand-20-x-80: rgba(45, 42, 38, 0.8);
    --transity-sand-20-x-40: rgba(45, 42, 38, 0.4);
    --transity-sand-10-x: #1f1d1a;
    --transity-sand-10-x-90: rgba(31, 29, 26, 0.9);
    --transity-sand-5-x: #12110f;

    /* ▪️ Headlines & Accents */
    --transity-red-100: #d08479; 

    /* ▪️ Actions */
    --transity-blue-100: rgba(100, 149, 206, 1); 
    --transity-blue-70: rgba(100, 149, 206, 0.7);
    --transity-blue-50-x-solid: #64b5f6;
    --transity-blue-20: rgba(100, 149, 206, 0.2);
    --transity-blue-10: rgba(100, 149, 206, 0.1);
    --transity-blue-5-x: #1a2635;

    /* ▪️ Dashboard */
    --transity-green-100: #a1bca8;
    --transity-green-50-x: #b2d4c3;
    --transity-green-20-x: #2a302b;
    
    --transity-yellow-100: #e5c36b;
    --transity-yellow-10-x: #3d3623;
    --transity-yellow-5-x: #262216;

    /* ▪️ Edge colors */
    --transity-black: #fff;
    --transity-black-50: rgba(255, 255, 255, 0.5);
    --transity-black-20: rgba(255, 255, 255, 0.2);
    --transity-black-10: rgba(255, 255, 255, 0.1);

    --transity-white: #000;
    --transity-white-70: rgba(0, 0, 0, 0.7);
    --transity-white-60: rgba(0, 0, 0, 0.6);
    --transity-white-50: rgba(0, 0, 0, 0.5);
    --transity-white-40: rgba(0, 0, 0, 0.4);
    --transity-white-30: rgba(0, 0, 0, 0.3);
    
    
    /* ⭐️ --- ICONS: graphical assets */
    /* ▪️ Flyout controller arrows */
    --asset-arrow-flyout: url("data:image/svg+xml,%3Csvg version=%271.1%27 xmlns=%27http://www.w3.org/2000/svg%27 x=%270px%27 y=%270px%27 width=%2714px%27 height=%2714px%27 viewBox=%270 0 14 14%27 style=%27enable-background:new 0 0 14 14;%27 xml:space=%27preserve%27%3E%3Cg id=%27Ebene_1%27%3E%3Cpolyline style=%27fill:%236494CE;%27 points=%2711.785,4.395 7,9.605 2.215,4.395%27/%3E%3C/g%3E%3C/svg%3E"); /* fill resolves --transity-blue-100 */
    --asset-arrow-flyout-white: url("data:image/svg+xml,%3Csvg version=%271.1%27 xmlns=%27http://www.w3.org/2000/svg%27 x=%270px%27 y=%270px%27 width=%2714px%27 height=%2714px%27 viewBox=%270 0 14 14%27 style=%27enable-background:new 0 0 14 14;%27 xml:space=%27preserve%27%3E%3Cg id=%27Ebene_1%27%3E%3Cpolyline style=%27fill:%23000;%27 points=%2711.785,4.395 7,9.605 2.215,4.395%27/%3E%3C/g%3E%3C/svg%3E"); /* fill resolves --transity-white */
    
    /* ▪️ 16x16px Triangle connectors (used for flyouts + tooltips) */
    --asset-triangle-flyout: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 17 17%27%3E%3Cpath d=%27M16.5,0.5 L0.5,0.5 L0.5,16.5 Z%27 fill=%27%23000%27/%3E%3Cpath d=%27M16.5,0.5 L0.5,0.5 L0.5,16.5%27 fill=%27none%27 stroke=%27%23927e5e%27 stroke-width=%271%27/%3E%3C/svg%3E"); /* stroke resolves --line-flyouthost, fill resolves --backcolor-flyout */
    --asset-triangle-tooltip: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 17 17%27%3E%3Cpath d=%27M16.5,0.5 L0.5,0.5 L0.5,16.5 Z%27 fill=%27%23000%27/%3E%3Cpath d=%27M16.5,0.5 L0.5,0.5 L0.5,16.5%27 fill=%27none%27 stroke=%27%23d08479%27 stroke-width=%271%27/%3E%3C/svg%3E"); /* stroke resolves --line-tooltip, fill resolves --backcolor-flyout */
    
    /* ▪️ Expander chevron */
    --asset-arrow-expand: url("data:image/svg+xml,%3Csvg version=%271.1%27 xmlns=%27http://www.w3.org/2000/svg%27 x=%270px%27 y=%270px%27 width=%2714px%27 height=%2714px%27 viewBox=%270 0 14 14%27 style=%27enable-background:new 0 0 14 14;%27 xml:space=%27preserve%27%3E%3Cg id=%27Ebene_1%27%3E%3Cpolyline style=%27fill:none;stroke:%23d08479;stroke-miterlimit:10;%27 points=%270.854,10.046 7,3.954 13.146,10.046%27/%3E%3C/g%3E%3C/svg%3E"); /* fill resolves --transity-red-100 */
    
    /* ▪️ Actions */
    --asset-action-save-white: url(../../static/media/icon_action_save_white.b7dcd38fced73629310f.svg);

    --asset-action-sort: url(../../static/media/icon_action_sort_black.40d3ae0bdbfdff7696c9.svg);

    /* ▪️ Form elements */
    --asset-checkbox-mark-disabled: url(../../static/media/icon_action_save_brown.e49a284d1473ae1aa5b6.svg);

    /* ▪️ Images & Documents */

    /* ▪️ Filters */

    /* ▪️ Entities */

    /* ▪️ Navigation */
    --asset-navigation-message: url(../../static/media/icon_navigation_message.47c229516dbd159450aa.svg);
    --asset-navigation-notification: url(../../static/media/icon_navigation_notification.2b26c520176f13cd6bb6.svg);
    --asset-navigation-search: url(../../static/media/icon_navigation_search.c8e0e5c5e8c0040f0fb7.svg);
    
    /* ▪️ Trip aspects */
    
    /* ▪️ States */

    /* ▪️ Channels */

    /* ▪️ Users */
    --asset-user-white: url(../../static/media/icon_user_white.1bc93de9d3e58b6053bf.svg);
    
    /* ▪️ Vehicles */
    
    /* ▪️ Product logos */
}


/* !-------------------------------------------- */
/* !INIT / SMALL VIEWPORTS: Central Transity UI properties */
/* !-------------------------------------------- */

/* Small desktop + tablet viewports */
@media only screen and (max-width: 1340px) {
    .tt-eins {
        /* Enable measuring <body> width without scrollbar space consumption , using cqi units*/
        container-type: inline-size;
        
        /* 📦 --- PAGE LAYOUT */
        /* ▪️ Default widths */
        --site-width: 100cqi;
    }
}

/* Phone viewports */
@media only screen and (max-width: 680px) {
    .tt-eins {
        /* ⭐️ --- ICONS */
        /* ▪️ Environment markers */
        --icon-environment-size: 20px;

        /* 📦 --- PAGE LAYOUT */
        /* ▪️ Central headers */
        --main-header-height: 65px;
        --main-header-height-nologo: 45px;
        
        /* ▪️ Overlay window */
        --overlay-width-minimum: 0px;
        --overlay-width-maximum: none;
        --overlay-viewport-distance: 0px;
    }
}


/* -------------------------------------------- */
/* Codebox Transity */
/* Version: 96 */
/* -------------------------------------------- */
/* 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);
    background-color: var(--backcolor-stage);
}

.ensemble, 
.actor {
    position: relative;
}

/* Transitions between page loads */
@view-transition {
    navigation: auto;
}


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


/* --- 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: Creator standalone PWA (DEPRECATED demo) */
/* !-------------------------------------------- */

/* --- Responsive stage */
.stage-creator {
    #ensemble_head:after {
        display: none;
    }
    
    #ensemble_main {
        min-height: 0;
    }
}


/* --- Full-height responsive Creator */
.stage-creator {
    .lift {
        height: calc(100dvh - var(--main-navigation-height));
        background-color: var(--backcolor-standard);
    }
    
    #actor_creator {
        width: var(--site-width);
        max-width: var(--overlay-width-maximum);
        margin: 0 auto 0 auto;
    }
}


/* !-------------------------------------------- */
/* !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-top-padding) - var(--main-navigation-height) - var(--main-header-height));
        container-name: layout-container; /* trigger field scaling for responsiveness */
        container-type: inline-size;
    }
}


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

.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-top-padding) - var(--main-navigation-height) - var(--main-header-height) - var(--main-ensemble-gutter) - var(--main-bottom-padding));
    }
    
    #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);
        
        &.expression-menu {
            z-index: 30;
        }
        
        /* Edge case: no controllers for current object */
        &:empty {
            height: 1px;
        }
        
        /* Some children need to know what effective sidebar width we have */
        --sidebar-width-effective: var(--sidebar-width);
    }
}


/* --- 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);
    }
    
    /* Layout variant: Collapsed list */
    #actor_listcontrol.expression-collapsed, 
    #actor_list.expression-collapsed {
        width: var(--sidebar-width-collapsed);
    }
    
    #actor_listcontrol.expression-collapsed + #actor_objectcontrol, 
    #actor_list.expression-collapsed + #actor_incident {
        width: calc(var(--site-width) - var(--sidebar-width-collapsed) - var(--sidebar-gutter));
        
        --sidebar-width-effective: var(--sidebar-width-collapsed);
    }
    
    /* Layout variant: ObjectViews without sidebar (missing ListView context) */
    &:not(:has(#actor_list)) {
        #actor_listcontrol {
            width: var(--sidebar-width-missing);
        }
        
        #actor_listcontrol + #actor_objectcontrol, 
        #actor_incident {
            width: calc(var(--site-width) - var(--sidebar-width-missing) - var(--sidebar-gutter));
                    
            --sidebar-width-effective: var(--sidebar-width-missing);
        }
    }
}


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

.stage:not(:has(.ensemble)) {
    /* --- Singular message container */
    .substance-message {
        text-align: center;
        padding: 16px 20dvw 32px 20dvw;
    }
    
    
    /* --- 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(--masthead-textset);
    }
    
    
    /* --- Reset button */
    .primary-action {
        display: block;
        margin: 32px auto 32px auto;
    }
}

/* Phone viewports */
@media only screen and (max-width: 680px) {
    .stage:not(:has(.ensemble)) {
        .substance-message {
            padding-left: var(--site-gutter-mobile);
            padding-right: var(--site-gutter-mobile);
        }
        
        .primary-action {
            width: calc(100% - 2 * var(--site-gutter-mobile));
        }
    }
}


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

/* --- Initialize blocking layer */
#ensemble_overlay {
    display: none;
    position: fixed;
    border: none; /* init in case it's already a <dialog> */
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: var(--backcolor-overlay-blocker);
}

/* Phone viewports */
@media only screen and (max-width: 680px) {
    /* Hide overlay off-screen */
    #ensemble_overlay {
        display: block;
        left: var(--site-width);
        transition: var(--transition-overlay);
    }
}


/* --- Active overlay layer */
.stage.overlay-active {
    overflow: hidden;
    height: 100%;
    
    .ensemble:not(#ensemble_overlay) {
        filter: var(--backcolor-overlay-blur);
    }
    
    #ensemble_overlay {
        display: block;
    }
}

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

/* Phone viewports */
@media only screen and (max-width: 680px) {
    .stage.overlay-active {
        #ensemble_overlay {
            left: 0;
            transition: var(--transition-overlay);
        }
    }
}


/* --- Contained actor with overlay content */
#ensemble_overlay {
    /* Arbitrary overlay dialog */
    .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%; /* loose dependency within #actor_creator.expression-solo (protector dialog) */
    }
    
    /* Overlay: Image viewer (fixed height) */
    #actor_viewer {
        bottom: var(--overlay-viewport-distance);
        width: 70%;
    }
    
    /* Overlay: modal dialogs (dynamic height) */
    #actor_modal {
    }
    
        
    /* Overlay: page-blocking waiting modal */
    #actor_latency {
        width: 30%;
    }
}

/* Phone viewports */
@media only screen and (max-width: 680px) {
    #ensemble_overlay {
        /* Arbitrary overlay dialog: Full-screen coverage */
        .actor {
            left: 0;
            border: none;
            border-radius: 0;
            transform: none;
            height: 100dvh;
        }
        
        /* Overlay: Creator dialog */
        #actor_creator {
            width: var(--site-width);
        }
        
                
        /* Overlay: page-blocking waiting modal */
        #actor_latency {
            width: var(--site-width);
        }
    }
}

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

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

.tt-eins em {
    font-style: normal;
    font-weight: var(--font-weight-bold);
}

.tt-eins strong {
    font-weight: var(--font-weight-black);
}


/* !-------------------------------------------- */
/* !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: var(--font-weight-regular);
    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: Main navigation menu entries & tabs */
/* !-------------------------------------------- */

/* --- Main menu entry */
.tt-eins .menu-action {
    font: var(--button-menu-textset);
    text-transform: var(--button-menu-transform);
    letter-spacing: var(--spacing-button-menu);
    color: var(--button-menu-text-color);
    padding: 0 var(--button-menu-padding-horizontal) 0 var(--button-menu-padding-horizontal);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: var(--transition-color);
}

/* Modified as flyout controllers (only used in main navigation) */
.tt-eins .menu-action.flyout-controller {
    --arrow-offset-horizontal: 15px;
    --arrow-offset-vertical: 0px;
    --arrow-offset-inset: 15px;
    
    padding-right: calc(var(--button-menu-padding-horizontal) + var(--arrow-offset-horizontal));
    
    /* Dropdown arrow */
    &:after {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        right: var(--arrow-offset-inset);
        margin-top: calc(-1 * var(--icon-flyout-size) / 2 + var(--arrow-offset-vertical));
        height: var(--icon-flyout-size);
        width: var(--icon-flyout-size);
        background: transparent var(--asset-arrow-flyout-white) center no-repeat;
        transition: var(--transition-transform);
    }
    
    &.flyout-active:after, 
    &.item-active:after {
        transform: rotateX(180deg);
        transition: var(--transition-transform);
    }
}

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

.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(--link-text-color);
    transition: var(--transition-color);
    
    /* Text only visible for screenreaders */
    .link-hiddentext {
       clip: rect(1px, 1px, 1px, 1px);
       clip-path: inset(50%);
       height: 1px;
       overflow: hidden;
       position: absolute;
       white-space: nowrap;
       width: 1px;
       margin: -1px; 
    }
}

/* Complex inner components */
.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(--link-text-color-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: calc(var(--icon-action-size) + 4px);
    color: var(--button-tertiary-text-color);
    font-size: inherit;
    font-weight: var(--font-weight-medium);
    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(--icon-action-size);
        width: var(--icon-action-size);
        background: transparent var(--asset-action-email) center no-repeat;
    }
}

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

.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: var(--asset-action-email-idle);
    }
}


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

/* --- Small standard form (text-only with arrow) */
.tt-eins .view-action {
    position: relative;
    font: var(--button-tertiary-textset);
    color: var(--button-tertiary-text-color);
    padding: 0 var(--icon-flyout-padding) 0 0;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: var(--transition-color);
    
    /* Dropdown arrow */
    &:after {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        right: var(--icon-flyout-inset);
        margin-top: calc(-1 * var(--icon-flyout-size) / 2);
        height: var(--icon-flyout-size);
        width: var(--icon-flyout-size);
        background: transparent var(--asset-arrow-flyout) center no-repeat;
        transition: var(--transition-transform);
    }
    
    &.flyout-active:after, 
    &.item-active:after {
        transform: rotateX(180deg);
        transition: var(--transition-transform);
    }
}

/* Interaction states: can have 2 different disabled states as filter controllers */
@media (hover: hover) {
    .tt-eins .view-action:not(:is([disabled], [aria-disabled="true"])):hover {
        color: var(--button-tertiary-text-color-hover);
        transition: var(--transition-color);
    }
    
    .tt-eins .view-action:is([disabled], [aria-disabled="true"]):hover {
        color: var(--button-tertiary-text-color);
        cursor: not-allowed;
    }
}

/* In ListView headers we have disabled buttons for mass processing */
.tt-eins .view-action[disabled]:not(:has(> span)) {
    opacity: 0.5;
}

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

.tt-eins .view-action[aria-disabled="true"]:focus-visible {
    outline: var(--focus-outline-disabled);
}


/* --- Single, unlabeled flyout button for ListViews (only used in Penalty, identical with secondary action) */
.tt-eins .view-action.action-icon {
    overflow: hidden;
    text-indent: -1000em;
    text-align: left;
    width: calc(var(--button-primary-padding-horizontal) + 12px);
    height: 22px;
    padding-right: 0;
    border: var(--button-secondary-border);
    background: var(--button-secondary-back);
    border-radius: var(--radius-interaction);
    transition: var(--transition-universal);
}

/* Interaction states */
@media (hover: hover) {
    .tt-eins .view-action.action-icon:hover {
        border: var(--button-secondary-border-hover);
        background: var(--button-secondary-back-hover);
        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: Standard block expanders */
/* !-------------------------------------------- */

.tt-eins .expand-action {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    font: var(--button-secondary-textset);
    color: var(--expand-text-color);
    padding: 0 0 0 20px;
    transition: var(--transition-color);
    
    /* Expanded state */
    &.item-active {
        color: var(--expand-text-color-active);
    }
    
    /* Arrow icon (vertically centered) */
    &:before {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        left: 0;
        margin-top: calc(-1 * var(--icon-chevron-size) / 2);
        height: var(--icon-chevron-size);
        width: var(--icon-chevron-size);
        background: transparent var(--asset-arrow-expand) center no-repeat;
        transform: rotateZ(90deg);
        transition: var(--transition-transform);
    }
    
    &.item-active:before {
        transform: rotateZ(180deg);
        transition: var(--transition-transform);
    }
}

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

.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: var(--button-primary-border);
    border-radius: var(--radius-interaction);
    background: var(--button-primary-back);
    font: var(--button-primary-textset);
    text-transform: var(--button-primary-transform);
    letter-spacing: var(--spacing-button-primary);
    color: var(--button-primary-text-color);
    text-decoration: none;
    height: var(--button-primary-height);
    line-height: calc(var(--button-primary-height) - 2px);
    text-align: center;
    padding: 0 var(--button-primary-padding-horizontal) 0 var(--button-primary-padding-horizontal);
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: var(--transition-universal);
    
    /* Solid buttons */
    &.action-level-solid {
        background: var(--button-primary-solid-back);
        border: var(--button-primary-solid-border);
        color: var(--button-primary-solid-text-color);
    }
}

/* Modified as flyout controllers */
.tt-eins .primary-action.flyout-controller {
    padding-right: calc(var(--button-primary-padding-horizontal) + var(--icon-flyout-padding));
    --icon-flyout-inset: 16px;
    
    /* Dropdown arrow */
    &:after {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        right: var(--icon-flyout-inset);
        margin-top: calc(var(--icon-flyout-size) / -2 + 1px);
        height: var(--icon-flyout-size);
        width: var(--icon-flyout-size);
        background: transparent var(--asset-arrow-flyout) center no-repeat;
        transition: var(--transition-transform);
    }
    
    &.flyout-active:after {
        transform: rotateX(180deg);
        transition: var(--transition-transform);
    }

    &.action-level-solid:after {
        background-image: var(--asset-arrow-flyout-white);
    }
}

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

.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: 0 var(--button-secondary-padding-horizontal) 0 calc(var(--icon-action-size) + var(--button-secondary-padding-horizontal) - 2px);
    border: var(--button-secondary-border);
    background: var(--button-secondary-back);
    letter-spacing: 0;
    color: var(--button-secondary-text-color);
    text-align: left;
    text-transform: var(--button-secondary-transform);
    font: var(--button-secondary-textset);
    line-height: var(--button-secondary-height);
    height: var(--button-secondary-height);
    
    /* Solid buttons */
    &.action-level-solid {
        background: var(--button-secondary-solid-back);
        border: var(--button-secondary-solid-border);
        color: var(--button-secondary-solid-text-color);
    }

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

/* Interaction states */
@media (hover: hover) {
    .tt-eins .primary-action.action-size-mini:not([disabled]):hover {
        border: var(--button-secondary-border-hover);
        background: var(--button-secondary-back-hover);
        color: var(--button-secondary-text-color-hover);
    }
    
    .tt-eins .primary-action.action-size-mini.action-level-solid:not([disabled]):hover {
        border: var(--button-secondary-solid-border-hover);
        background: var(--button-secondary-solid-back-hover);
        color: var(--button-secondary-solid-text-color-hover);
    }
}

.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(--icon-action-size);
    width: var(--icon-action-size);
    top: 50%;
    left: calc(var(--button-secondary-padding-horizontal) - 4px);
    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: var(--asset-action-add);
    }
    
    &.action-create:before {
        background-image:var(--asset-action-create);
    }
    
    &.action-copy:before {
        background-image: var(--asset-action-copy);
    }
    
    &.action-download:before {
        background-image: var(--asset-action-download);
    }
    
    &.action-upload:before {
        background-image: var(--asset-action-upload);
    }
    
    &.action-delete:before {
        background-image: var(--asset-action-delete);
    }
    
    &.action-save:before {
        background-image: var(--asset-action-save);
    }
    &.action-save.action-level-solid:before {
        background-image: var(--asset-action-save-white);
    }
    
    &.action-mail:before {
        background-image: var(--asset-action-email);
    }
    
    &.action-cancel:before {
        background-image: var(--asset-action-cancel);
    }
    &.action-cancel.action-level-solid:before {
        background-image: var(--asset-action-cancel-white);
    }
    
    &.action-calendar:before {
        background-image: var(--asset-action-calendar);
    }
    
    &.action-time:before {
        background-image: var(--asset-action-time);
    }
    
    &.action-switch:before {
        background-image: var(--asset-action-switch);
    }
    
    &.action-transfer:before {
        background-image: var(--asset-action-transfer);
    }

    &.action-verify:before, 
    &.action-undo:before, 
    &.action-reload:before {
        background-image: var(--asset-action-reload);
    }
    
    &.action-edit:before {
        background-image: var(--asset-action-edit);
    }
    
    &.action-view:before {
        background-image: var(--asset-action-view-on);
    }
    
    &.action-view.item-active:before {
        background-image: var(--asset-action-view-off);
    }
    
    &.action-search:before {
        background-image: var(--asset-action-search);
    }
    
    &.action-print:before {
        background-image: var(--asset-action-print);
    }
    
    &.action-finish:before {
        background-image: var(--asset-action-finish);
    }
    
    &.action-reorder-up:before {
        background-image: var(--asset-action-reorder-up);
    }
    
    &.action-reorder-down:before {
        background-image: var(--asset-action-reorder-down);
    }
    
    &.action-decide-approve:before, 
    &.action-decide-reject:before {
        background-image: var(--asset-action-decide-approve);
    }
    
    &.action-decide-reject:before {
        transform: rotateX(180deg) translateY(50%);
    }
    
    &.action-up:before, 
    &.action-down:before, 
    &.action-back:before, 
    &.action-forward:before {
        background-image: var(--asset-action-up);
    }
    
    &.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;
    height: var(--button-sort-height);
    border-radius: var(--button-sort-radius);
    padding: var(--button-sort-padding);
    background: transparent;
    color: var(--button-sort-text-color);
    font: var(--button-sort-textset);
    line-height: var(--button-sort-height);
    white-space: nowrap;
    width: 100%;
    transition: var(--transition-color);
}

.tt-eins th[aria-sort] .sort-action, 
.tt-eins th[aria-sort] p {
    background-color: var(--button-sort-back-active);
}

.tt-eins th[aria-sort] p {
    font-weight: var(--button-sort-neutral-weight);
}

/* Interaction states */
@media (hover: hover) {
    .tt-eins .sort-action:hover {
        background-color: var(--button-sort-back-hover);
        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(--subhead-textcolor);
    margin: 0 0 10px 0;
    text-transform: var(--subhead-transform);
    font: var(--subhead-textset);
    letter-spacing: var(--spacing-subhead);
    float: inline-start;
}

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

/* Field container */
.tt-eins .field-entry {
    position: relative;
    
    --field-disabled-icon: transparent center var(--asset-field-disabled) no-repeat;
    --field-search-icon: transparent center var(--asset-field-search) no-repeat;
}

.tt-eins .field-container {
    font: var(--field-label-textset); /* padding-top depends on lh */
    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;
}

/* Mobile viewports */
@container layout-container (width < 680px) {
    .tt-eins .field-entry {
        --field-height: var(--field-height-mobile);
    }
    
    .tt-eins .field-container {
        --field-label-textset: var(--field-label-textset-mobile);
    }
}


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

.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;
}

.tt-eins .field-entry:not(.entry-checkbox):not(.entry-radio):not(.entry-unlabeled) label:has(.substance-id .suffix-point) {
    top: -4px;
}

/* 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 {
        --field-label-textset: var(--field-label-textset-mobile);
    }
}

/* 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: var(--field-optional-suffix);
    font-weight: var(--field-label-optional-weight);
}

/* 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;
}

/* Prepare state markers for validation result */
.tt-eins .field-entry.has-validation {
    --field-bordercolor-validated: var(--field-bordercolor) var(--field-bordercolor) var(--entry-validation-color) var(--field-bordercolor);

    &.validation-ok {
        --entry-validation-color: var(--color-state-ok);
        --entry-validation-backcolor: var(--field-statecolor-ok);
        --entry-validation-icon: var(--asset-validation-ok);
    }
    
    &.validation-warn {
        --entry-validation-color: var(--color-state-warn);
        --entry-validation-backcolor: var(--field-statecolor-warn);
        --entry-validation-icon: var(--asset-validation-warn);
    }
    
    &.validation-crisis {
        --entry-validation-color: var(--color-state-crisis);
        --entry-validation-backcolor: var(--field-statecolor-crisis);
        --entry-validation-icon: var(--asset-validation-crisis);
    }
}


/* --- 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(--field-value-textset);
    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: var(--field-border);
    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);
}

/* Password fields: hide native visibility switch in MS Edge */
.tt-eins input[type="password"]::-ms-reveal {
    display: none;
}

/* 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"] {
        --field-value-textset: var(--field-value-textset-mobile);
    }
}

/* 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-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(--button-secondary-width-minimum); /* 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: var(--field-bordercolor-disabled) !important; /* blocks :hover */
    border-radius: var(--field-radius-disabled);
    color: var(--field-textcolor-disabled);
    -webkit-text-fill-color: var(--field-textcolor-disabled); /* 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;
}

/* TODO: Restricted usage of new combobox fields, see TB-1344 */
.tt-eins .field-entry.flyout-compact:not(:has(.primary-action.action-search)):not(:is(#actor_creator .field-entry)) {
    input.flyout-controller:not([disabled]) {
        padding-left: var(--field-width-search);
    }
    
    .field-container:has(input.flyout-controller:not([disabled])):before {
        content: "";
        display: block;
        background: var(--field-search-icon);
        width: var(--icon-combobox-search-size);
        height: var(--icon-combobox-search-size);
        margin-bottom: calc(-1 * (var(--icon-combobox-search-size) / 2));
        position: absolute;
        left: calc((var(--field-width-search) - var(--icon-combobox-search-size)) / 2);
        bottom: calc(var(--field-height) / 2);
    }
}

/* Validation markers: allow partial override for :hover and :focus */
.tt-eins .field-entry.has-validation {
    input:not([type="radio"]):not([type="checkbox"]):not(:hover):not(:focus) {
        border-width: var(--field-border-validated-width);
        border-color: var(--field-bordercolor-validated);
    }
}


/* --- Text areas */
.tt-eins textarea {
    display: block;
    font: var(--field-value-textset);
    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-textarea);
    background-color: var(--field-backcolor);
    border: var(--field-border);
    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 {
        --field-value-textset: var(--field-value-textset-mobile);
    }
}

/* 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 for Chrome/Chromium/Safari (as of December 2025) */
@supports (field-sizing: content) {
    .tt-eins textarea {
        min-height: var(--field-height-textarea-0);
        min-height: var(--field-height-textarea-initial);
        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-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: var(--field-bordercolor-disabled) !important; /* blocks :hover */
    border-radius: var(--field-radius-disabled);
    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 textarea[disabled]:empty {
    height: var(--field-height);
}

.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: allow partial override for :hover and :focus */
.tt-eins .field-entry.has-validation {
    textarea:not(:hover):not(:focus) {
        border-width: var(--field-border-validated-width);
        border-color: var(--field-bordercolor-validated);
    }
}


/* --- Pulldown select fields */
.tt-eins select {
    outline: none;
    font: var(--field-value-textset);
    margin: 0;    
    width: 100%;
    height: var(--field-height);
    line-height: var(--field-height);
    color: var(--field-textcolor);
    background-color: var(--field-backcolor);
    border-radius: var(--field-radius);
    border: var(--field-border);
    padding: var(--field-padding);
    padding-top: 0;
    padding-bottom: 0;
    padding-right: var(--button-secondary-width-minimum);
    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 {
        --field-value-textset: var(--field-value-textset-mobile);
    }
}

/* Dropdown arrow */
.tt-eins .field-entry.entry-select .field-container:after, 
.tt-eins .field-entry.entry-select .field-container.field-action .primary-action:after {
    content: "";
    display: block;
    background: transparent var(--asset-select-arrow) 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(.field-container.field-action) .field-container:after {
    display: none;
}

.tt-eins .field-entry.entry-select .field-container.field-action .primary-action:after {
    right: calc(100% + 10px);
}

.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-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: var(--field-bordercolor-disabled) !important; /* blocks :hover */
    border-radius: var(--field-radius-disabled);
    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);
}

/* Fields with embedded action buttons */
.tt-eins .field-entry.entry-select .field-container.field-action {
    display: flex;
    
    select {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;    
    }
    
    .primary-action {
        position: relative;
        overflow: visible;
    }
}

/* Validation markers: allow partial override for :hover and :focus */
.tt-eins .field-entry.has-validation {
    select:not(:hover):not(:focus) {
        border-width: var(--field-border-validated-width);
        border-color: var(--field-bordercolor-validated);
    }
}


/* --- 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: var(--field-option-value-textset);
    display: block;
    padding-top: 2px;
    transition: var(--transition-color-outline);

    &:has(.substance-entity), 
    &:has(.substance-id) {
        padding-top: 0;
        margin-top: -2px;
    }
    
    &.substance-richtext span {
        display: block;
        margin-bottom: 0;
    }
}

@container layout-container (width < 680px) {
    .tt-eins .field-entry.entry-checkbox label {
        padding-top: 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;
    --checkbox-mark-size: 12px;
    
    &: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: 0;
    top: var(--option-offset);
    width: var(--option-size);
    height: var(--option-size);
    background: transparent center var(--asset-checkbox-mark-checked) no-repeat;
    background-size: var(--checkbox-mark-size);
}

/* 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: var(--asset-checkbox-mark-disabled);
}

/* 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: var(--field-option-value-textset);
    display: block;
    padding-top: 1px;
    transition: var(--transition-color-outline);

    &:has(.substance-entity) {
        padding-top: 0;
        margin-top: -2px;
    }
    
    &.substance-richtext span {
        display: block;
        margin-bottom: 0;
    }
}

@container layout-container (width < 680px) {
    .tt-eins .field-entry.entry-radio label {
        padding-top: 0;
    }
}

/* Visual marker */
.tt-eins .field-entry.entry-radio {
    --option-offset: 0px;
    --radio-checkball-inset: 8px;
    
    &: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: calc(var(--radio-checkball-inset) / 2);
    top: calc((var(--radio-checkball-inset) / 2) + var(--option-offset));
    width: calc(var(--option-size) - var(--radio-checkball-inset));
    height: calc(var(--option-size) - var(--radio-checkball-inset));
    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: 16px;
    height: var(--field-height);
    border: 1px solid var(--option-bordercolor-active);
    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: var(--backcolor-neutral-white);
        border-color: var(--option-bordercolor-hover);
        -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: var(--backcolor-neutral-white);
        border-color: var(--option-bordercolor-hover);
        -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(--option-backcolor-checked);
    border-radius: var(--field-radius);
}

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

/* Track element: Interaction states */
@media (hover: hover) {
    .tt-eins input[type=range]:hover::-webkit-slider-runnable-track {
        background: var(--option-bordercolor-hover);
        cursor: pointer;
    }
    
    .tt-eins input[type=range]:hover::-moz-range-track {
        background: var(--option-bordercolor-hover);
        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(--field-comment-textcolor);
    font: var(--field-comment-textset);
    
    .link-action {
        font-weight: var(--link-text-richtext-weight);
    }
}

@container layout-container (width < 680px) {
    .tt-eins .field-entry .field-comment {
        --field-comment-textset: var(--field-comment-textset-mobile);
    }
}

/* 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:is(.radio-group, .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: var(--entry-validation-backcolor) 4px 4px no-repeat;
        background-size: 15px;
        background-image: var(--entry-validation-icon);
    }
    
    .field-comment * {
        font-weight: var(--field-comment-error-weight);
        color: var(--field-comment-textcolor-validated);
    }
}

.tt-eins .field-entry:is(.radio-group, .checkbox-group) {
    .field-comment { 
        border-top: var(--line-standard);
    }
    
    &.has-validation .field-comment {
        border-width: var(--field-comment-validated-width);
        border-color: var(--entry-validation-color);
    }
}

/* 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-filecontainer);

    /* 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: var(--asset-placeholder-image);
    }
    
    &.file-document .file-thumbnail {
        background-image: var(--asset-placeholder-file);
    }
    
    /* 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: var(--transity-white-50);
            transition: var(--transition-opacity);
            cursor: zoom-in;
        }
        
        &.file-document .file-thumbnail .link-action:hover .file-name {
            color: var(--link-text-color-hover);
        }
    }
    
    .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: var(--backcolor-neutral-white);
        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: 22px;
        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-suffix: var(--backcolor-id-suffix-inverse);
}


/* --- 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 var(--transity-white-50);
    --grid-line-dark: 1px solid var(--transity-black-50);
    
    /* 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: var(--transity-black-50);
        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: var(--font-weight-medium);
    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 */
/* Sticky table header */
.tt-eins .substance-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Column header cells */
.tt-eins .substance-table thead th {
    background-color: var(--backcolor-stage);
    padding-bottom: var(--line-signature-width);
    box-shadow: var(--table-head-sticky-separator);
    text-align: left;
    vertical-align: middle;
    font: var(--table-head-textset);
    color: var(--table-head-text-color);
    transition: var(--transition-color);
    
    /* Static titles without sorting functionality */
    & > p {
        position: relative;
        padding: var(--table-head-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%;
    }
    
    /* Indicator for sort direction (default sorting order is ascending) */
    &[aria-sort] .sort-action, 
    &[aria-sort] > p {
        padding-left: 28px;
    }
    
    &[aria-sort] .sort-action:before, 
    &[aria-sort] > p:before {
        content: "";
        display: block;
        position: absolute;
        bottom: 11px;
        left: 10px;
        height: 14px;
        width: 14px;
        background: transparent var(--asset-action-sort) center no-repeat;
        transform: rotateX(180deg);
        transition: var(--transition-transform);
    }
        
    &[aria-sort="descending"] .sort-action:before, 
    &[aria-sort="descending"] > p:before {
        transform: rotateX(0deg);
        transition: var(--transition-transform);
    }
}

/* Headless tables – NOT USED YET */
.tt-eins .substance-table.table-headless thead {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
}


/* --- Body table rows */
.tt-eins .substance-table {
    /* Horizontal divider lines */
    tbody tr {
        border-top: var(--table-separator);
    }
    
    thead + tbody tr:first-child {
        border-top: none;
    }
    
    /* Highlighted rows: used for last visited entity in an ObjectView */
    tr.row-highlight td:first-child {
        border-left: var(--table-row-active-border);
        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: var(--table-body-padding);
        font: var(--table-body-textset);
        color: var(--table-body-text-color);
    }
    
    /* 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-table-sort);
        
        .substance-entity.entity-state:is(.state-type-request, .state-type-request-complete, .state-type-request-working) {
            --entity-state-color: var(--color-state-requested-inverse);
        }
    }
    
    tbody td.col-sorted {
        border-top: var(--table-separator);
        border-top-width: 4px;
        padding-top: calc(var(--table-body-padding-vertical) - 1px);
    }
    
    tbody tr:first-child td.col-sorted {
        border-top: none;
        padding-top: calc(var(--table-body-padding-vertical) + 1px);
    }
    
    /* Marked cells */
    td.col-marked, 
    tr.row-highlight td.col-marked {
        background: var(--backcolor-marker);
    }
    
    td.col-marked p {
        color: var(--textcolor-emphasis);
    }
    
    /* Special cell content: entities */
    .substance-entity {
        display: block;
        width: -moz-min-content;
        width: min-content;
    }
    
    td:not(:first-child) .substance-tooltip:has(.substance-entity) {
        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.entity-trip.flyout-controller {
        width: -moz-max-content;
        width: max-content;
    }

    * + .substance-entity {
        margin-top: 5px; 
    }
    
    * + .substance-toolchain.toolchain-entity {
        margin-top: 10px; 
    }
    
    .substance-entity.entity-trip + .substance-toolchain.toolchain-entity {
        margin-top: 10px;
        margin-left: calc(var(--icon-trip-size) + 6px);
    }

    * + .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: primary actions in last cell per row as follow-up to an atomic editor (see TA-951) */
    td:has(.substance-editor) ~ td:last-child:has(.primary-action) {
        text-align: right;
    }
    
    /* Special cell content: aligned mix of boolean atomic editors and read-only crisis booleans */
    &:has(td .substance-editor.editor-type-boolean.editor-mutable.boolean-crisis) td:has(.substance-entity.entity-validation.validation-unlabeled.validation-result-crisis) {
        text-align: right;
        
        .substance-entity.entity-validation {
            text-align: left;
        }
    }

    /* Special cell content: flyouts */
    td:not(.col-compact) > .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: counter chips */
    td > .substance-counter.counter-zero {
        display: none;
    }

    /* Special cell content: protected buttons */
    td > .substance-protector.protector-type-floating.item-active .protector-flyout {
        top: 0;
        bottom: auto;
        right: 0;
        left: auto;
        transform: none;
        z-index: 1;
        
        .protector-title {
            width: -moz-max-content;
            width: max-content;
        }
    }
    
    /* NOT USED YET: Special cell content: longform content */
    td.cell-longform .longform-head {
        font-weight: var(--font-weight-bold);
        padding-bottom: 10px;
        border-bottom: var(--line-separator);
        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, 
    .link-action > .substance-id, 
    .link-action > .substance-entity.entity-state {
        display: block;
        width: 100%;
    }
}

/* Phone viewports */
@media only screen and (max-width: 680px) {
    .tt-eins .substance-table tbody td .link-action {
        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:is(.suffix-point, .suffix-opinion) {
        display: inline-block;
    }
    
    .entity-state .substance-id {
        line-height: calc(var(--chip-id-linked-height) - 1px);
        vertical-align: top;
        width: 100%;
        display: inline-flex;
        -moz-column-gap: 4px;
             column-gap: 4px;
    }
    
    .entity-state .substance-id .id-suffix:is(.suffix-point, .suffix-opinion) {
        display: block;
        margin-left: auto;
        height: var(--chip-id-linked-height);
        line-height: calc(var(--chip-id-linked-height) - 4px);
    }
}

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

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

@media (hover: hover) {
    .tt-eins .substance-table tbody td.col-main .link-action:hover > *:not(.entity-state) {
        color: var(--link-text-color-hover);
        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: 553 */
/* -------------------------------------------- */
/* Created by @twotribes, Germany */
/* -------------------------------------------- */
/* StyleSheet Scope: BIG ACTOR-INDEPENDENT RESOURCES */
/* -------------------------------------------- */

/* !-------------------------------------------- */
/* !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: Progress bar */
/* -------------------------------------------- */

/* !--- Optional: label for progress bar */
.tt-eins .substance-progress .progress-description {
    display: block;
    font: var(--textset-xl);
    color: var(--textcolor-accent);
    text-align: center;
    margin-bottom: 24px;
    
    /* Optional additional description */
    mark {
        font: var(--textset-plus-m);
        color: var(--textcolor-standard);
        display: block;
    }
    
    mark:not(:first-child) {
        margin-top: 8px;
    }
}

@media only screen and (max-width: 680px) {
    .tt-eins .substance-progress .progress-description {
        font: var(--textset-l);
        
        /* Optional additional description */
        mark {
            font: var(--textset-m);
        }
    }
}


/* !--- Generic progress bar construct */
.tt-eins .substance-progress .progress-display {
    width: 100%;
    display: block;
    
    /* Reset from browser defaults */
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    overflow: hidden;
    
    /* Inner variables */
    --progress-bar-color: var(--color-state-ok);
    --progress-background-color: var(--transity-white);
    --bar-height: 8px;
    
    --indeterminate-bar: linear-gradient(to right,
        var(--progress-background-color) 50%,
        var(--progress-bar-color) 0%,
        var(--progress-bar-color) 55%,
        var(--progress-background-color) 0%
    );
    --indeterminate-slider-size: 225% 100%;
    --indeterminate-animation: progress-loading 2.5s infinite linear;
    
    /* Basic styles */
    height: var(--bar-height);
    border: 1px solid var(--progress-bar-color);
    border-radius: var(--radius-interaction);
    position: relative; /* Give Chrome's :after element a positioning context */
}

/* Not used yet */
.tt-eins .substance-progress.progress-inline .progress-display {
    --progress-bar-color: var(--transity-red-100);
    --indeterminate-bar: linear-gradient(to right,
        var(--progress-background-color) 40%,
        var(--progress-bar-color) 0%,
        var(--progress-bar-color) 55%,
        var(--progress-background-color) 0%
    );
}


/* !--- Determinate progress with min/max values */
/* not used yet */


/* !--- Indeterminate bars */
/* Animator */
@keyframes progress-loading {
    100% {
        background-position: left; 
    }
}

/* Chromium browsers */
.tt-eins .substance-progress .progress-display:indeterminate:after {
    content: "";
    inset: 0;
    position: absolute;
    background: var(--indeterminate-bar);
    background-size: var(--indeterminate-slider-size);
    background-position: right; 
    animation: var(--indeterminate-animation);
}

/* Safari */
.tt-eins .substance-progress .progress-display::-webkit-progress-bar {
    background: var(--indeterminate-bar);
    background-size: var(--indeterminate-slider-size);
    background-position: right; 
    animation: var(--indeterminate-animation);
}

/* Firefox */
.tt-eins .substance-progress .progress-display::-moz-progress-bar {
    background: var(--indeterminate-bar);
    background-size: var(--indeterminate-slider-size);
    background-position: right; 
    animation: var(--indeterminate-animation);
}


/* !-------------------------------------------- */
/* !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: var(--backcolor-flyout);
        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: var(--backcolor-flyout);
            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(--subhead-textcolor);
        margin-bottom: 10px;
        text-transform: var(--subhead-transform);
        font: var(--subhead-textset);
        letter-spacing: var(--spacing-subhead);
    }

    &.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;
    
    --vertical-flyout-offset: 8px;

    > .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: var(--vertical-flyout-offset);
        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: 17px;
    height: 17px;
    bottom: calc(-1 * (var(--vertical-flyout-offset) + 9.5px));
    left: 50%;
    margin-left: -8px;
    z-index: 100;
    transform: rotateZ(45deg);
    background-repeat: no-repeat;
    border: none;
    background-image: var(--asset-triangle-flyout);
}

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


/* --- Flyout content container */
.tt-eins .flyout-host {
    text-align: left;
    background: var(--backcolor-flyout);
    padding: 15px 0 15px 0;
    width: var(--flyout-width-minimum);
    border: var(--line-flyouthost);
    border-radius: var(--flyout-radius);
    box-shadow: var(--shadow-flyout);
    transition: var(--transition-width);
    
    /* Static width variants */
    &.host-size-standard {
        width: var(--flyout-width-standard);
        max-width: none;
    }
    
    &.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;
    }
    
    /* Flexible width: flyout containing a text preview */
    &:has(.substance-richtext blockquote):not(.host-sidebar) {
        width: var(--dialog-email-preview-width);
    }
    
    /* Flexible width: flyout containing a text editor (selector includes extra class to equal specificity to previous selector) */
    &:has(.entry-richtext .substance-richtext-editor):not(.host-sidebar) {
        width: var(--dialog-texteditor-width);
    }

    /* Flexible width: flyouts with 2 columns (used for customer answer dialog) */
    &.host-sidebar {
        --primary-dialog-pane-width: var(--dialog-texteditor-width); /* inherits clamped value */
        
        width: calc(var(--primary-dialog-pane-width) + var(--flyout-sidebar-width) + 2px) /* accommodate border width */;
        grid-template-columns: var(--flyout-sidebar-width) 1fr;
        
        .sidebar-container {
            grid-column: 1;
            grid-row: 1;
        }
        
        > *:not(.sidebar-container) {
            grid-column: 2;
            grid-row: 1;
        }
    }
    
    &:not(.host-sidebar) .sidebar-container {
        display: none;
    }
}

/* 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-option-textset: var(--textset-m);
    --menu-option-active-weight: var(--font-weight-bold);
    --menu-inset-horizontal: 15px;
    --menu-inset-interactive-horizontal: 10px;
    
    .menu-section {
        padding: 10px var(--menu-inset-horizontal) 10px var(--menu-inset-horizontal);
    }
    
    .menu-info + :is(.menu-section, .menu-info), 
    .menu-section + :is(.menu-section, .menu-info), 
    .menu-section + .substance-textpicker, 
    .substance-textpicker + .menu-section {
        border-top: var(--line-separator-menu-flyout);
    }
    
    :is(.menu-info:first-child, *[data-sentinel="top"] + .menu-info), 
    :is(.menu-section.section-interactive:first-child, *[data-sentinel="top"] + .menu-section.section-interactive) {
        margin-top: 10px;
    }
    
    /* Interactive menu sections */
    * + .menu-section.section-interactive {
        margin-top: 20px;
        position: relative;
    }
    
    *: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);
    }
    
    .menu-section.section-interactive + .menu-section {
        margin-top: 20px;
    }
    
    /* Last menu sections */
    .menu-section:last-of-type, 
    .menu-section:has(+ [data-sentinel="bottom"]) {
        padding-bottom: 0;
        margin-bottom: 0;
    }
    
    .menu-info:last-of-type, 
    .menu-info:has(+ [data-sentinel="bottom"]) {
        margin-bottom: 0;
    }
    
    /* Edge case: multiple option groups within one section */
    .menu-section ul + ul {
        margin-top: 20px;
    }
    
    /* Edge case: messages within menus */
    .menu-section .substance-message {
        margin-bottom: 20px;
    }
    
    /* Optional group title */
    .section-title {
        margin-bottom: 10px;
        margin-top: 5px;
        color: var(--subhead-textcolor);
        text-transform: var(--subhead-transform);
        font: var(--subhead-textset);
        letter-spacing: var(--spacing-subhead);
        
        .substance-id .id-suffix.suffix-point {
            color: var(--textcolor-standard);
        }
    }
    
    .menu-section:first-child .section-title {
        margin-top: 0;
    }
}

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


/* --- Special menu sections */
/* Expandable menu sections */
.tt-eins .substance-menu .menu-section.section-expandable {
    &:not(.item-active) .expand-action {
        margin-bottom: 0;
    }
    
    &:not(.item-active) :is(ul, .substance-table, .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 {
    /* Not used yet: singular options above lists of options */
    .section-controller {
        margin-bottom: 20px;
    }
    
    /* List of options */
    ul {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-auto-rows: auto;
        grid-column-gap: 20px;
        -moz-column-gap: 20px;
             column-gap: 20px;
        grid-row-gap: 12px;
        row-gap: 12px;
        
        .field-entry {
            margin-bottom: 0;
        }
    }
    
    /* Single option */
    .molecule {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        display: inline-block;
        min-width: 0; /* prevents overflowing grid cells */
        width: 100%;
    }
}


/* --- Single menu option */
.tt-eins .substance-menu .molecule {
    margin-left: calc(-1 * var(--menu-inset-horizontal));
    margin-right: calc(-1 * var(--menu-inset-horizontal));
    padding: 0 var(--menu-inset-horizontal) 0 var(--menu-inset-horizontal);
    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;
    }
    
    /* Interaction states */
    @media (hover: hover) {
        &:not(.field-entry):not(.section-action):not(.entry-info):hover {
            background-color: var(--backcolor-menu-hover);
            transition: var(--transition-color);
        }
    }
    
    /* Active menu option */
    &.item-active {
        background-color: var(--backcolor-menu-active);
        border-left: var(--backcolor-menu-active-border);
        padding-left: 7px;
        font-weight: var(--menu-option-active-weight);
        transition: var(--transition-color);
    }
    
    /* Action items inside menu options */
    .link-action {
        display: block;
        width: 100%;
    }
    
    .link-action .substance-entity {
        color: inherit;
    }
    
    > .link-action {
        font: var(--menu-option-textset);
        padding-top: 7px;
        padding-bottom: 7px;
    }
    
    &: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;
        }
        
        span {
            flex-grow: 1;
        }
        
        .substance-counter {
            order: 1;
        }
    }
    
    /* Menu entries holding validation chips */
    &:has(.substance-entity.entity-validation) {
        > .link-action {
            display: flex;
            align-items: center;
            -moz-column-gap: 10px;
                 column-gap: 10px;
        }
        
        span {
            flex-grow: 1;
        }
        
        .substance-entity.entity-validation {
            order: 1;
        }
    }
    
    /* Menu action buttons */
    &.section-action:not(:has(.action-comment)) {
        display: flex;
        -moz-column-gap: 32px;
             column-gap: 32px;
    }
    
    &.section-action > .primary-action:last-child:not(:only-child) {
        margin-left: auto;
    }
    
    &.section-action .action-comment {
        margin-top: 5px;
        color: var(--textcolor-standard);
        hyphens: auto;
    }
    
    /* Menu options with form elements which spawn their own value flyout */
    &.field-entry.substance-flyout .flyout-host {
        left: var(--menu-inset-horizontal);
        right: var(--menu-inset-horizontal);
        width: calc(100% - 2 * var(--menu-inset-horizontal));
        min-width: 0;
    }
    
    /* Menu options with checkbox/radio elements */
    &.entry-checkbox label, 
    &.entry-radio label {
        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: var(--menu-inset-interactive-horizontal);
    margin-right: var(--menu-inset-interactive-horizontal);
    padding: 10px var(--menu-inset-interactive-horizontal) 0 var(--menu-inset-interactive-horizontal);
    border-radius: var(--radius-panel);

    .section-title {
        background: var(--backcolor-header);
        padding: 10px;
        margin: -10px calc(-1 * var(--menu-inset-interactive-horizontal)) 15px calc(-1 * var(--menu-inset-interactive-horizontal));
    }
    
    /* Decisive exit action/submit button for interactive section*/
    .section-action {
        margin-top: 15px;
        margin-left: calc(-1 * var(--menu-inset-horizontal));
        margin-right: calc(-1 * var(--menu-inset-horizontal));
        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-menu-infoblock);
    color: var(--textcolor-standard);
    padding: 10px var(--menu-inset-horizontal) 10px var(--menu-inset-horizontal);

    &: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;
    }
    
    .substance-richtext.richtext-foreign {
        word-break: break-word; /* Protection against adversary strings */
    }

    /* Key value pairs */
    .block-property .property-item {
        margin: 0 -10px 10px -10px;
        padding: 0 10px 10px 10px;
        border-bottom: var(--line-separator-inverse);
        
        &:last-child {
            padding-bottom: 0;
            margin-bottom: 0;
            border-bottom: none;
        }
        
        .property-title {
            font-weight: var(--font-weight-bold);
        }
    }
}

/* Key value pairs in columns */
.tt-eins .substance-menu .menu-info.info-columns {
    .block-property {
        display: table;
        border-collapse: collapse;
        
        .property-item {
            display: table-row;
            margin: 0;
            padding: 0;
        }
        
        .property-title {
            display: table-cell;
            padding: 10px 20px 10px 0;
            vertical-align: top;
        }
        
        .property-value {
            display: table-cell;
            padding: 10px 0 10px 0;
            vertical-align: top;
        }
        
        .property-item:last-child .property-title, 
        .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 var(--asset-user) center 0 no-repeat;
        background-size: 36px;
    }

    &.vcard-level-1:before {
        background-image: var(--asset-user-level1);
    }

    &.vcard-level-2:before {
        background-image: var(--asset-user-level2);
    }

    &.vcard-level-3:before {
        background-image: var(--asset-user-level3);
    }


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

    .vcard-name {
    }

    .vcard-role {
    }

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

    .vcard-phone {
        font-weight: var(--font-weight-medium);
        margin-top: 5px;
    }
}


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

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

/* Handle unwieldy German words as group titles */
.tt-eins .substance-textpicker .substance-accordion .accordion-controller {
    hyphens: auto;
}


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

    .substance-tab-bar {
        margin-bottom: 0;
    }
    
    /* Search feature */
    .segment-all > ul:first-child {
        margin: 10px;
    }
}


/* --- Innermost list of text fragment pickers */
/* Edge case: empty groups */
.tt-eins .substance-textpicker .accordion-block .block-content > .substance-placeholder {
    margin-left: 10px;
}

/* Sub-headlines between multiple lists */
.tt-eins .substance-textpicker .textpicker-listhead {
    margin: 15px 10px 0 10px;
    color: var(--textcolor-standard);
    font-weight: var(--font-weight-bold);
    
    &:first-child {
        margin-top: 0;
    }
}


/* --- Single fragment entry: inner layout */
.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 */
    
    /* Node action */
    .link-action {
        padding: 5px 0 5px 0;
        flex-grow: 1;
        hyphens: auto;
    }
    
    /* Preview action */
    .primary-action.action-view {
        flex-shrink: 0;
    }
}   

@media (hover: hover) {
    /* With Tooltip: text insertion */
    .tt-eins .substance-textpicker .textpicker-list .list-item.substance-tooltip .link-action:hover {
        cursor: copy;
    }
    
    .tt-eins .substance-textpicker .textpicker-list .list-item:has(.link-action:hover) {
        background-color: var(--backcolor-menu-hover);
    }
}


/* --- Single fragment entry: conditional upwards tooltip expansion */
/* min-height inference: overlapping conditions */
/* 7 or more L1 groups: last 3 text fragments (at any depth) */
/* 6 or more L2 groups: last 3 text fragments (at any depth) */
/* Any level with 5 or more text fragments: last 3 text fragments */
.tt-eins .substance-textpicker .segmenter-section {
    > .substance-accordion > .accordion-block:nth-last-child(-n + 3):nth-child(n + 7) .list-item, 
    .substance-accordion .substance-accordion .accordion-block:nth-last-child(-n + 3):nth-child(n + 6) .list-item, 
    .textpicker-list:nth-last-child(-n + 3):nth-child(n + 5) .list-item {
        /* Tooltip debugging marker: background-color: #ccc; */
        --tooltip-offset-top: var(--tooltip-upwards-top);
        --tooltip-offset-bottom: var(--tooltip-upwards-bottom);
        --tooltip-offset-arrow-top: var(--tooltip-upwards-arrow-top);
        --tooltip-offset-arrow-bottom: var(--tooltip-upwards-arrow-bottom);
    }
}


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

/* !--- Single, expandable accordion block */
.tt-eins .substance-accordion > .accordion-block {
    &:not(:last-child) {
        border-bottom: var(--line-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;
    }
}

/* Accordion with selection feature: make room for selection background */
.tt-eins .substance-accordion.accordion-selector .substance-accordion .accordion-block {
    margin-left: 0;
    margin-right: 0;
    padding-left: 10px;
    padding-right: 10px;
}


/* !--- Block head */
.tt-eins .substance-accordion .accordion-block .block-head {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 10px 10px 10px 10px;
    -moz-column-gap: 8px;
         column-gap: 8px; 
    
    .head-controller {
        flex-grow: 1;
        position: relative;
        display: flex;
        align-content: center;
    }
    
    /* Controller button */
    .head-controller .accordion-controller {
        flex-grow: 1;
        white-space: normal; /* We can have long labels here */
    }
    
    .head-controller .accordion-controller:not(:hover) .substance-id .id-suffix.suffix-point {
        color: var(--textcolor-standard);
    }
    
    /* 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;
    
    .accordion-controller {
        font-weight: var(--font-weight-bold);
    }
}


/* !--- 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;
}

/* Accordion with selection feature: Highlight innermost active selection (all the children of the selected block but not the parent) */
.tt-eins .substance-accordion.accordion-selector {
    .accordion-block.item-active:not(:has(.accordion-block.item-active)):not(:has(.list-item.item-active)) .block-content {
        background-color: var(--backcolor-selection);
    }
    
    .list-item.item-active {
        background-color: var(--backcolor-selection);
    }
}


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

/* !--- Hosting container */
.tt-eins .substance-tooltip {
    position: relative;
    
    /* Vertical coordinates for downwards extension */
    --tooltip-downwards-top: -4px;
    --tooltip-downwards-bottom: auto;
    --tooltip-downwards-arrow-top: 16px;
    --tooltip-downwards-arrow-bottom: auto;
    
    /* Vertical coordinates for upwards extension */
    --tooltip-upwards-top: auto;
    --tooltip-upwards-bottom: -4px;
    --tooltip-upwards-arrow-top: auto;
    --tooltip-upwards-arrow-bottom: 16px;

    /* Default initialization */
    --tooltip-offset-top: var(--tooltip-downwards-top);
    --tooltip-offset-bottom: var(--tooltip-downwards-bottom);
    --tooltip-offset-arrow-top: var(--tooltip-downwards-arrow-top);
    --tooltip-offset-arrow-bottom: var(--tooltip-downwards-arrow-bottom);
}


/* !--- Tooltip-triggering button */
/* Bubble positioning: clickable state or ID markers */
.tt-eins .substance-tooltip:has(.tooltip-controller.link-action .substance-id), 
.tt-eins .substance-tooltip:has(.tooltip-controller.link-action .substance-entity.entity-state) {
    --tooltip-offset-top: -12px;
    --tooltip-offset-arrow-top: 16px;
}

/* Interaction states */
.tt-eins .substance-tooltip .tooltip-controller:focus-visible {
    outline: var(--focus-outline-standard);
    outline-offset: 3px;        
}

@media (hover: hover) {
    .tt-eins .substance-tooltip .tooltip-controller:not(.link-action):hover {
        cursor: help;
    }
}


/* !--- Tooltip content */
.tt-eins .substance-tooltip .tooltip-container {
    /* Visual shape */
    display: none;
    width: var(--flyout-width-medium);
    min-height: 48px;
    position: absolute;
    background: var(--backcolor-flyout);
    padding: 10px;
    border: var(--line-tooltip);
    border-radius: var(--tooltip-radius);
    box-shadow: var(--shadow-flyout);
    z-index: 10;
    
    /* Default positioning: extend to the right */
    top: var(--tooltip-offset-top);
    bottom: var(--tooltip-offset-bottom);
    left: calc(100% + 10px);
    
    /* Arrow connector: attached to left border */
    &:before {
        content: "";
        display: block;
        position: absolute;
        width: 16px;
        height: 16px;
        z-index: 100;
        transform: rotateZ(-45deg);
        background-repeat: no-repeat;
        border: none;
        background-image: var(--asset-triangle-tooltip);

        top: var(--tooltip-offset-arrow-top);
        bottom: var(--tooltip-offset-arrow-bottom);
        left: 0;
        margin-left: -8px;
    }
    
    /* Protect against overly long content */
    &.container-adversary {
        word-break: break-word;
    }
}

/* Extend tooltip to the left */
.tt-eins .substance-tooltip.tooltip-left .tooltip-container {
    left: auto;
    right: calc(100% + 10px);
    
    /* Arrow connector: attached to right border */
    &:before {
        left: auto;
        right: 0;
        transform: rotateZ(135deg);
        margin-left: 0;
        margin-right: -8px;
    }
}

/* Top-attached tooltip: aligned left, extend downwards */
.tt-eins .substance-tooltip.tooltip-down .tooltip-container {
    min-height: 0;
    top: calc(100% + 10px);
    bottom: auto;
    left: 0;
    
    /* Arrow connector: attached to top border */
    &:before {
        top: 0;
        bottom: auto;
        left: 16px;
        margin-left: 0;
        margin-top: -8px;
        transform: rotateZ(45deg);
    }
}


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

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


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

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

    .toolchain-link > .primary-action {
        display: block;
    }
    
    /* Edge case: sometimes we can't avoid hosting 2 buttons within the wrapper */
    .toolchain-link:has(.primary-action + .primary-action) {
        display: flex;
        -moz-column-gap: 8px;
             column-gap: 8px;
        
    }
}


/* --- Specialized toolchain for reordering */
.tt-eins .substance-toolchain.toolchain-index {
    -moz-column-gap: 0;
         column-gap: 0;
    
    /* Up & Down buttons */
    .toolchain-link:first-child .primary-action {
        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: var(--button-secondary-border);
        border-bottom: var(--button-secondary-border);
        background: var(--backcolor-neutral-white);
    }
    
    .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: var(--font-weight-medium);
        line-height: 20px;
        min-width: 3.5em;
        text-align: center;
    }
}


/* --- Specialized toolchain for multiple central entities */
.tt-eins .substance-toolchain.toolchain-entity {
    flex-wrap: wrap;
    -moz-column-gap: 14px;
         column-gap: 14px;
    row-gap: 4px;
    
    .substance-entity {
        margin-top: 0; /* neutralize external settings */
        
        .entity-id {
            font: var(--textset-m);
            font-weight: var(--font-weight-medium);
            line-height: var(--icon-entity-size);
        }
    }
}

/* Small desktop + tablet viewports */
@media only screen and (max-width: 1340px) {
    .tt-eins .substance-toolchain.toolchain-entity {
        -moz-column-gap: 2px;
             column-gap: 2px;

        .substance-entity {
            .entity-id {
                overflow: hidden;
                text-indent: -1000em;
            }
        }
    }
}

/* Phone viewports */
@media only screen and (max-width: 680px) {
    .tt-eins .substance-toolchain.toolchain-entity {
        -moz-column-gap: 0;
             column-gap: 0;

        .substance-entity {
            --icon-entity-size: var(--icon-entity-size-small);
            --icon-entity-size-type-margin: var(--icon-entity-size-small-margin);
            --icon-entity-type-margin-top: var(--icon-entity-size-small-margin-top);
        }
        
        .substance-entity.entity-validation {
            text-indent: -1000em;
            padding-left: 19px;
        }
    }
}


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

/* --- Outer container */
.tt-eins .substance-tab-bar {
    position: relative;
    margin-bottom: 20px;
    
    --tab-back-overshoot: 20px;
    --tab-countercolor: var(--tab-counter-text-color);
    
    &.tab-embedded {
        background-color: var(--tab-bar-embedded-back);
        padding: 6px;
        z-index: 1; /* set context for z-index: -1 */
        margin-bottom: 10px;
        
        --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: var(--tab-bar-border);
        background: var(--tab-bar-back);
        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;
    background: var(--tab-back);
    border-radius: var(--radius-interaction) var(--radius-interaction) 0 0;
    border: var(--tab-border);
    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: var(--tab-bar-divider-bordercolor);
    }
    
    /* Active state */
    &.item-active {
        background: var(--tab-active-back);
        border: var(--tab-active-border);
        border-bottom: none;
        transition: var(--transition-color);
    }
    
    /* Interaction states */
    @media (hover: hover) {
        &:hover {
            border: var(--tab-border-hover);
            border-bottom: none;
            transition: var(--transition-color);
        }
        
        &:hover .menu-action {
            background: var(--tab-back-hover);
        }
        
        &.item-active:hover .menu-action {
            background: var(--tab-active-back-hover);
        }
    }
}

/* Embedded tab bars: segmented control */
.tt-eins .substance-tab-bar.tab-embedded .tab {
    border-radius: var(--radius-interaction);
    border: var(--tab-embedded-border);
    flex-basis: 0;
    flex-grow: 1;
    
    /* 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: var(--tab-embedded-back-hover);
        }
    }
}


/* --- Single tab container: content */
.tt-eins .substance-tab-bar {
    /* Button inside tab */
    .menu-action {
        max-width: 100%;
        font: var(--button-tab-textset);
        padding: 0 var(--tab-bar-button-menu-padding-horizontal) 0 var(--tab-bar-button-menu-padding-horizontal);
        border-radius: var(--radius-interaction);
        color: var(--tab-text-color);
        height: var(--tab-bar-height);
        line-height: var(--tab-bar-height);
        transition: var(--transition-color);
    }

    .tab:not(.item-active) .menu-action:focus-visible {
        outline: var(--focus-outline-standard);
    }
        
    .tab.item-active .menu-action {
        color: var(--tab-active-text-color);
        font-weight: var(--button-tab-active-weight);
        transition: var(--transition-color);
    }
    
    /* Buttons inside embedded tab bar */
    &.tab-embedded {
        .menu-action {
            width: 100%;
            font: var(--button-tab-embedded-textset);
            text-align: center;
            padding: 0 var(--tab-bar-embedded-button-menu-padding-horizontal) 0 var(--tab-bar-embedded-button-menu-padding-horizontal);
            height: var(--tab-bar-embedded-height);
            line-height: calc(var(--tab-bar-embedded-height) - 1px);
        }
        
        .tab:not(:last-child) .menu-action {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }
        
        .tab:not(:first-child) .menu-action {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
    }
    
    /* Counter inside tab (before label) */
    .menu-action .substance-counter {
        position: relative;
        margin-right: 5px;
        font: var(--chip-counter-textset-tab);
        line-height: calc(var(--chip-counter-height-tab) - 1px);
        height: var(--chip-counter-height-tab);
        letter-spacing: 0;
        color: var(--tab-countercolor);
        border-color: var(--tab-countercolor);
        background-color: transparent;
    }
    
    .tab.item-active .menu-action .substance-counter {
        --tab-countercolor: var(--tab-active-text-color);
    }
    
    /* Point markers inside tab */
    .menu-action .substance-id .id-suffix.suffix-point {
        font: inherit;
        padding: 0;
        background: none;
    }
    
    .tab:not(.item-active) .substance-id .id-suffix.suffix-point {
        font-weight: var(--font-weight-regular);
    }
}


/* !-------------------------------------------- */
/* !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-header);
    }
    
    
    /* --- 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;
        }
        
        .substance-table tr:first-child td {
            padding-top: 6px;
        }
        
        .substance-table td:first-child {
            padding-right: 0;
        }
        
        .substance-table td:has(.primary-action), 
        .substance-table td:last-child {
            width: 1%;
        }
        
        .substance-entity.entity-attachment {
            width: auto;
        }
    }
    
    
    /* --- Variant: Custom uploader */
    &.segmenter-files .segmenter-section.segment-upload {
        padding: 0 6px 6px 6px;
        
        /* List of uploaded files */
        .substance-table {
            margin-bottom: 10px;
        }
        
        /* Flyout to upload more files */
        .substance-flyout.flyout-active:before {
            bottom: auto;
            top: -18px;
            transform: rotateZ(-135deg);
        }
        
        .substance-flyout .flyout-controller {
            margin: 0 auto 0 auto;
            display: block;
        }
        
        .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 {
        height: 100%;
    }
}


/* --- Description & current filter value */
.tt-eins .substance-filter .filter-criterion {
    .criterion-descript {
        padding: 10px 0 8px 0;
        border-bottom: var(--line-separator);
        transition: var(--transition-color);
    }
    
    &.item-active .criterion-descript {
        border-bottom-width: 6px;
    }
    
    /* Interaction states */
    @media (hover: hover) {
        .criterion-descript:has(.view-action:not(:is([disabled], [aria-disabled="true"])):hover) {
            border-bottom-color: var(--linecolor-medium);
            transition: var(--transition-color);
        }
    }
    
    .criterion-descript .view-action:focus-visible {
        outline-offset: 5px;
    }
    
    /* Filter controller: screenreader-only categorization */
    .criterion-type {
        clip: rect(1px, 1px, 1px, 1px);
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
        margin: -1px;
    }
    
    /* Filter controller: Filter title with type icons */
    .criterion-title {
        display: block;
        font: var(--button-filter-title-textset);
        text-transform: var(--button-filter-title-transform);
        letter-spacing: var(--spacing-filter);
        color: var(--button-filter-title-color);
        margin-bottom: 3px;
    }
    
    .criterion-title:before {
        content: "";
        display: inline-block;
        width: 10px;
        height: 12px;
        margin-right: 5px;
        vertical-align: baseline;
        background: transparent var(--asset-filter-types) left -64px no-repeat;
    }
    
    &.criterion-type-range .criterion-title:before {
        background-position: left -58px;
    }
    
    &.criterion-type-date .criterion-title:before {
        background-position: left -108px;
    }
    
    &.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:is([disabled], [aria-disabled="true"])) .criterion-title:before {
        background-position: left -78px;
    }
    
    &.item-active .criterion-title {
        letter-spacing: var(--spacing-filter-active);
        font-weight: var(--button-filter-title-active-weight);
    }
    
    /* Filter controller: current filter value */
    .criterion-value {
        display: block;
        font-weight: var(--font-weight-regular);
        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: var(--button-filter-criterion-active-weight);
    }
    
    .view-action:is([disabled], [aria-disabled="true"]) .criterion-value {
        color: var(--textcolor-standard);
        padding-right: 0;
    }
    
    @media (hover: hover) {
        .view-action:is([disabled], [aria-disabled="true"]) .criterion-value[title]:hover {
            cursor: help;
        }
    }
    
    /* Filter controller: arrow */
    .flyout-controller {
        padding-right: 0;
    }
    
    .flyout-controller:after {
        top: 100%;
        margin-top: -15px;
    }
    
    .flyout-controller:is([disabled], [aria-disabled="true"]):after {
        display: none;
    }
}


/* --- Filter flyout */
.tt-eins .substance-filter .filter-criterion {
    .substance-flyout {
        --vertical-flyout-offset: 10px;
    }
    
    .flyout-host {
        left: 0;
        transform: none;
        min-width: 100%; /* Active value list could be wider than default flyout width */
    }
    
    .substance-flyout.flyout-active:before {
        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;
    }
    
    .substance-menu .menu-section:first-child:has(.molecule:only-child):has(.link-action:only-child), 
    .substance-menu div[data-sentinel="top"] + .menu-section:has(.molecule:only-child):has(.link-action:only-child) {
        margin-top: -20px;
    }

    .flyout-host .molecule.field-entry input[type="number"] {
        width: 100%;
    }
    
    .substance-menu .substance-textpicker {
        padding-left: 0;
        padding-right: 0;
    }
}


/* !-------------------------------------------- */
/* !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 var(--asset-action-edit) 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%;
    top: -3px;
}

.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: var(--option-toggle-height);
        width: var(--option-toggle-width);
    }
    
    &.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-toggle-rail);
        outline: var(--outline-contrast);
        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: var(--backcolor-neutral-white);
        transition: var(--transition-universal);
    }
    
    input:checked ~ label:after {
        background: var(--option-backcolor-checked) center var(--asset-checkbox-mark-checked) no-repeat;
        background-size: 82%;
        left: 21px;
        transition: var(--transition-universal);
    }
    
    &.boolean-crisis input:checked ~ label:after {
        background-color: var(--option-backcolor-checked-attention);
        background-image: var(--asset-checkbox-mark-attention);
        background-size: 90%;
        border-color: var(--option-bordercolor-attention);
    }
}


/* --- 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: calc(-1 * var(--button-secondary-height) - 4px);
    
    .toolchain-link .primary-action {
        box-shadow: var(--shadow-editor-button);
    }
    
    /* Icon-only exit buttons (DEPRECATED with TB-1413) */
    .toolchain-link .primary-action.action-icon {
        width: var(--button-secondary-width-atomic);
    }
    
    .primary-action.action-icon:before {
        width: var(--button-secondary-width-atomic);
        height: 100%;
    }
}


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

/* --- Outer TMCE container */
.tt-eins .substance-richtext-editor .tox-tinymce {
    border: var(--line-separator);
    font-family: var(--font-base);
    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(--button-tertiary-text-color);
}

/* 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(--button-tertiary-text-color);
}

.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(--button-tertiary-text-color);
}

.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: var(--textcolor-inverse);
        font-weight: var(--font-weight-bold);
    }
    
    /* 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;
        }
    }
    
    &.entity-icon.flyout-controller {
        @media (hover: hover) {
            cursor: pointer;
        }
    }
}


/* !-------------------------------------------- */
/* !COMPONENT: Entities --- Main navigation */
/* !-------------------------------------------- */

/* These only occur as .entity-icon.flyout-controller */
.tt-eins .substance-entity:is(.entity-search, .entity-notification, .entity-message) {
    overflow: visible;
    width: var(--button-menu-icon-width);
    height: var(--main-navigation-height);
    
    &.entity-search {
        width: var(--button-menu-icon-width-reduced);
    }
    
    /* Entity icons */
    &.entity-search:before {
        content: "";
        height: 100%;
        width: 22px;
        left: 9px;
        top: 50%;
        margin-top: -11px;
        background-image: var(--asset-navigation-search);
    }
    
    &.entity-notification:before {
        content: "";
        width: 24px;
        height: 32px;
        left: 16px;
        top: 50%;
        margin-top: -16px;
        background-image: var(--asset-navigation-notification);
        background-position: center 6px;
    }
    
    &.entity-message:before {
        content: "";
        width: 24px;
        height: 32px;
        left: 16px;
        top: 50%;
        margin-top: -16px;
        background-image: var(--asset-navigation-message);
        background-position: center 6px;
    }
    
    /* Counter bubbles */
    &.entity-notification .substance-counter {
        position: absolute;
        top: 50%;
        margin-top: calc(-1 * var(--chip-counter-height));
        left: 28px;
    }

    &.entity-message .substance-counter {
        position: absolute;
        top: 50%;
        margin-top: calc(-1 * var(--chip-counter-height));
        left: 34px;
    }

    /* Interaction states */
    &:focus-visible {
        outline: var(--focus-outline-inverse);
        outline-offset: -5px;
    }
}


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

.tt-eins .substance-entity.entity-comment {
    font-weight: var(--font-weight-bold);
    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(--chip-validation-textset);
    text-transform: var(--chip-validation-transform);
    letter-spacing: var(--spacing-state-large);
    min-height: var(--chip-validation-height);
    line-height: var(--chip-validation-height);
    white-space: nowrap;
    padding-left: calc(var(--icon-validation-size) + 4px);
    padding-right: var(--chip-validation-padding-right);
    border-radius: calc(var(--chip-validation-height) / 2 + 1px);
    border: 1px solid transparent;
    outline: var(--outline-contrast);
    transition: var(--transition-universal);
    
    --chip-validation-padding-right: 8px;

    &:before {
        content: "";
        height: var(--icon-validation-size);
        width: var(--icon-validation-size);
        top: 50%;
        margin-top: calc(-1 * var(--icon-validation-size) / 2);
        left: 2px;
        background-position: center;
    }
    
    /* Slightly larger, unlabeled validation chips */
    &.validation-unlabeled {
        text-indent: -1000em;
        overflow: hidden;
        padding-left: 20px;
        padding-right: 0;
        width: var(--icon-validation-size);
    }
    
    &.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(--chip-validation-textset-big);
    border-radius: calc(var(--chip-validation-height-big) / 2 + 1px);
    padding-left: 30px;
    padding-right: 10px;
    letter-spacing: var(--spacing-state-medium);
    line-height: var(--chip-validation-height-big);
    height: var(--chip-validation-height-big);

    &:before {
        left: 4px;
    }
}


/* --- Validation types */
.tt-eins .substance-entity.entity-validation {
    /* Attention */
    &.validation-result-attention {
        background-color: var(--backcolor-message-info);
        border-color: var(--linecolor-message-info);
    }
    
    /* OK */
    &.validation-result-ok {
        background-color: var(--backcolor-message-ok);
        border-color: var(--linecolor-message-ok);
    }
    
    &.validation-result-ok.validation-unlabeled {
        border-color: var(--linecolor-message-ok-small);
    }
    
    /* Warning or suspicious */
    &.validation-result-suspicious, 
    &.validation-result-warn {
        background-color: var(--backcolor-message-warn);
        border-color: var(--linecolor-message-warn);
    }
    
    /* Crisis */
    &.validation-result-crisis {
        background-color: var(--backcolor-message-crisis);
        border-color: var(--linecolor-message-crisis);
    }
    
    /* Icons */
    &.validation-result-attention:before {
        background-image: var(--asset-validation-attention);
        background-size: 16px;
    }
    
    &.validation-result-ok:before {
        background-image: var(--asset-validation-ok);
    }
    
    &.validation-result-suspicious:before {
        background-image: var(--asset-validation-suspicious);
    }
    
    &.validation-result-warn:before {
        background-image: var(--asset-validation-warn);
    }
    
    &.validation-result-crisis:before {
        background-image: var(--asset-validation-crisis);
    }
}

/* Edge case: reduce complexity for unlabeled Crisis chips (TODO: should be harmonized) */
.tt-eins .substance-entity.entity-validation.validation-result-crisis.validation-unlabeled {
    outline: none;
    background-color: transparent;
    border-color: transparent;
}

/* 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: var(--asset-validation-attention-red);
        margin-top: -11px;
    }
}


/* --- Variant: validation result with flyout */
.tt-eins .substance-entity.entity-validation.flyout-controller {
    padding-right: calc(var(--chip-validation-padding-right) + var(--icon-flyout-padding));
    
    /* Arrow icon */
    &:after {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        right: 4px;
        margin-top: calc(-1 * var(--icon-flyout-size) / 2);
        height: var(--icon-flyout-size);
        width: var(--icon-flyout-size);
        background: transparent var(--asset-arrow-flyout) center no-repeat;
        transition: var(--transition-transform);
    }
    
    &.flyout-active:after {
        transform: rotateX(180deg);
        transition: var(--transition-transform);
    }
    
    /* Interaction states */
    @media (hover: hover) {
        &:hover {
            border: var(--button-secondary-border-hover);
            background-color: var(--button-secondary-back-hover);
            color: var(--button-secondary-text-color-hover);
            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: var(--button-secondary-border-hover);
        background-color: var(--button-secondary-back-hover);
        color: var(--button-secondary-text-color-hover);
        transition: var(--transition-universal);
    }
}


/* !-------------------------------------------- */
/* !COMPONENT: Entities --- CENTRAL Entities, abstract settings */
/* !-------------------------------------------- */

.tt-eins .substance-entity:is(.entity-incident, .entity-guarantee, .entity-complaint, .entity-opinion, .entity-report, .entity-admin) {
    padding-left: calc(var(--icon-entity-size) + var(--icon-entity-type-margin));
    min-height: var(--icon-entity-size);
    
    &:before {
        content: "";
        width: var(--icon-entity-size);
        height: var(--icon-entity-size);
        background-size: 100%;
        top: 0px;
        top: var(--icon-entity-type-margin-top, 0px);
    }
    
    /* Big size */
    &.entity-big {
        padding-left: calc(var(--icon-entity-size-big) + var(--icon-entity-type-margin-big));
        min-height: var(--icon-entity-size-big);
    }
    
    &.entity-big:before {
        top: var(--icon-entity-type-margin-big-top);
        width: var(--icon-entity-size-big);
        height: var(--icon-entity-size-big);
        background-size: 40px;
    }
}


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

.tt-eins .substance-entity.entity-incident {
    --icon-entity-type-margin: var(--icon-entity-incident-margin);
    --icon-entity-type-margin-big: var(--icon-entity-incident-margin-big);
    --icon-entity-type-margin-big-top: var(--icon-entity-incident-margin-big-top);

    /* Incident types */
    &.incident-type-operations:before {
        background-image: var(--asset-incident-operations);
    }
    &.incident-type-reporting:before {
        background-image: var(--asset-incident-reporting);
    }
    &.incident-type-sales:before {
        background-image: var(--asset-incident-sales);
    }
    &.incident-type-staff:before {
        background-image: var(--asset-incident-staff);
    }
    &.incident-type-stop:before {
        background-image: var(--asset-incident-stop);
    }
    &.incident-type-vehicle:before {
        background-image: var(--asset-incident-vehicle);
    }
    &.incident-type-mixed:before {
        background-image: var(--asset-incident-mixed);
    }

    /* Incident properties: ID number */
    .entity-id {
        display: inline-block;
        color: inherit;
        font: var(--textset-minus-l);
        margin-right: 2px;
    }
}


/* !-------------------------------------------- */
/* !COMPONENT: Entities --- Guarantee cases */
/* !-------------------------------------------- */

.tt-eins .substance-entity.entity-guarantee {
    --icon-entity-type-margin: var(--icon-entity-guarantee-margin);
    --icon-entity-type-margin-big: var(--icon-entity-guarantee-margin-big);
    --icon-entity-type-margin-big-top: var(--icon-entity-guarantee-margin-big-top);
    
    /* Case types */
    &:before {
        background-image: var(--asset-guarantee);
    }
}


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

.tt-eins .substance-entity.entity-complaint {
    --icon-entity-type-margin: var(--icon-entity-complaint-margin);
    --icon-entity-type-margin-big: var(--icon-entity-complaint-margin-big);
    --icon-entity-type-margin-big-top: var(--icon-entity-complaint-margin-big-top);
    
    /* Complaint types */
    &:before, 
    &.complaint-type-generic:before {
        background-image: var(--asset-complaint-generic);
    }
    &.complaint-type-digital:before {
        background-image: var(--asset-complaint-digital);
    }
    &.complaint-type-operations:before {
        background-image: var(--asset-complaint-operations);
    }
    &.complaint-type-service:before {
        background-image: var(--asset-complaint-service);
    }
    &.complaint-type-ticket:before {
        background-image: var(--asset-complaint-ticket);
    }
    
    /* Complaint properties: major category */
    .entity-id {
        display: block;
        color: inherit;
        line-height: var(--icon-entity-size);
    }
}


/* !-------------------------------------------- */
/* !COMPONENT: Entities --- ELMA Opinion Requests */
/* !-------------------------------------------- */

.tt-eins .substance-entity.entity-opinion {
    --icon-entity-type-margin: var(--icon-entity-opinion-margin);
    --icon-entity-type-margin-big: var(--icon-entity-opinion-margin-big);
    --icon-entity-type-margin-big-top: var(--icon-entity-opinion-margin-big-top);
    
    /* Opinion types */
    &:before, 
    &.opinion-type-answer:before {
        background-image: var(--asset-opinion-answer);
    }
    &.opinion-type-action:before {
        background-image: var(--asset-opinion-action);
    }
    &.opinion-type-information:before {
        background-image: var(--asset-opinion-information);
    }
}

/* In ListViews this can be paired with an ID-wrapping ObjectView link */
.tt-eins .substance-entity.entity-opinion > .link-action:before {
    content: "";
    position: absolute;
    display: block;
    width: calc(var(--icon-entity-size) + var(--icon-entity-type-margin));
    height: 100%;
    left: 0;
    top: 0;
}

/* In ObjectViews this can be can contain an inner contact abbreviation */
.tt-eins .substance-entity.entity-opinion:has(abbr)[title] {
    cursor: help;
}


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

.tt-eins .substance-entity.entity-report {
    --icon-entity-type-margin: var(--icon-entity-report-margin);
    --icon-entity-type-margin-big: var(--icon-entity-report-margin-big);
    --icon-entity-type-margin-big-top: var(--icon-entity-report-margin-big-top);

    /* Report + export types */
    &:before, 
    &.report-type-generic:before, 
    &.report-type-listview:before, 
    &.report-type-payment:before {
        background-image: var(--asset-admin-endpoint);
    }
}


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

.tt-eins .substance-entity.entity-admin {
    --icon-entity-type-margin: var(--icon-entity-admin-margin);
    --icon-entity-type-margin-big: var(--icon-entity-admin-margin-big);
    --icon-entity-type-margin-big-top: var(--icon-entity-admin-margin-big-top);
    
    /* Admin entity types */
    &:before, 
    &.admin-asset-setting:before, 
    &.admin-asset-endpoint:before {
        background-image: var(--asset-admin-endpoint);
    }
    &.admin-asset-person:before {
        background-image: var(--asset-admin-person);
    }
    &.admin-asset-structure:before {
        background-image: var(--asset-admin-structure);
    }
    &.admin-asset-content:before {
        background-image: var(--asset-admin-content);
    }
    &.admin-asset-email:before {
        background-image: var(--asset-admin-email);
    }
    &.admin-asset-constraint:before {
        /* For the moment we're not using --asset-admin-constraint here */
        background-image: var(--asset-admin-endpoint);
    }
    &.admin-asset-grid:before {
        background-image: var(--asset-admin-grid);
    }
    &.admin-asset-organization:before {
        background-image: var(--asset-admin-organization);
    }
    
    /* Admin entity type content: unwieldy content */
    &.admin-asset-email.content-adversary, 
    &.admin-asset-content.content-adversary {
        word-break: break-all;
        -ms-word-break: break-all;
    }
    
    /* Additional qualifier strings */
    p + p {
        font-weight: var(--font-weight-regular);
        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: var(--icon-trip-size);
    padding-left: calc(var(--icon-trip-size) + 6px);
    padding-top: 3px;

    &:before {
        content: "";
        height: var(--icon-trip-size);
        width: var(--icon-trip-size);
    }

    &.trip-aspect-operator:before,
    &.trip-aspect-staff:before {
        background-image: var(--asset-trip-staff);
    }

    &.trip-aspect-line:before,
    &.trip-aspect-linebundle:before {
        background-image: var(--asset-trip-route);
    }

    &.trip-aspect-stop:before {
        background-image: var(--asset-trip-stop);
    }

    &.trip-aspect-ticket:before {
        background-image: var(--asset-trip-ticket);
    }

    &.trip-aspect-vehicle:before {
        background-image: var(--asset-trip-vehicle);
    }

    &.trip-aspect-passenger:before {
        background-image: var(--asset-trip-passenger);
        top: -1px;
    }

    .entity-id {
        /* Emphasis on major property: only used in Penalty */
        display: inline-block;
        color: inherit;
        font-size: 80%;
        font-weight: bolder;
        letter-spacing: var(--spacing-state-medium);

        &:after {
            content: ": ";
            font-weight: bolder;
        }
    }
    
    /* Additional qualifier strings */
    p + p {
        font-weight: var(--font-weight-regular);
        margin-top: 4px;
    }
}


/* --- Trip aspects with flyout functionality */
.tt-eins .substance-entity.entity-trip.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: calc(-1 * var(--icon-flyout-size) / 2);
        height: var(--icon-flyout-size);
        width: var(--icon-flyout-size);
        background: transparent var(--asset-arrow-flyout) center no-repeat;
        transition: var(--transition-transform);
    }
    
    &.flyout-active:after {
        transform: rotateX(180deg);
        transition: var(--transition-transform);
    }
    
    /* Interaction states */
    @media (hover: hover) {
        &:hover {
            color: var(--link-text-color-hover);
            transition: var(--transition-universal);
        }
    }
    
    &:focus-visible {
        outline: var(--focus-outline-standard);
        outline-offset: 3px;
    }
}


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

/* --- ROUTE TABLES: Vehicle type pool */
.tt-eins .substance-entity.entity-vehicle {
    padding-left: calc(var(--icon-vehicle-size) + 6px);
    padding-top: 4px;
    min-height: var(--icon-vehicle-size);
    
    /* Set a generic and unknown vehicle icon */
    &:before {
        content: "";
        width: var(--icon-vehicle-size);
        height: var(--icon-vehicle-size);
        background-image: var(--asset-vehicle-generic);
    }
    
    &.vehicle-unknown:before {
        background-image: var(--asset-vehicle-unknown);
    }
    
    /* Mapping of internal Transity core types to main icons (based on TRIAS vehicle types) */
    &.vehicle-air:before {
        background-image: var(--asset-vehicle-plane);
    }
    
    &.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: var(--asset-vehicle-bus);
    }
    
    &.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: var(--asset-vehicle-tram);
    }
    
    &.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: var(--asset-vehicle-train);
    }
    
    &.vehicle-monorail:before {
        background-image: var(--asset-vehicle-monorail);
    }
    
    &.vehicle-water:before {
        background-image: var(--asset-vehicle-ship);
    }
    
    &.vehicle-funicular:before, 
    &.vehicle-cableway:before {
        background-image: var(--asset-vehicle-cableway);
    }
    
    &.vehicle-taxi:before {
        background-image: var(--asset-vehicle-taxi);
    }
}


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

/* --- Users */
.tt-eins .substance-entity.entity-user {
    min-height: calc(var(--icon-user-size) + 1px);
    padding-left: calc(var(--icon-user-size) + 6px);
    padding-top: 4px;

    &.user-recipient {
        padding-left: 56px;
    }
    
    /* Icon spaces */
    &:before {
        content: "";
        height: var(--icon-user-size);
        width: var(--icon-user-size);
        top: -1px;
        background-image: var(--asset-user);
    }
    
    &.user-recipient:before {
        left: 28px;
    }
    
    &.user-recipient:after {
        content: "";
        display: block;
        position: absolute;
        height: var(--icon-user-size);
        width: var(--icon-user-size);
        left: 3px;
        top: 0;
        background: transparent center var(--asset-user-recipient) no-repeat;
    }
    
    /* Basic user classes */
    &.user-level-passenger:before {
        background-image: var(--asset-user-passenger);
    }
    
    &.user-level-system:before {
        background-image: var(--asset-user-system);
    }
    
    /* Level hierarchy for registered Transity users */
    &.user-level-1:before {
        background-image: var(--asset-user-level1);
    }
    &.user-level-2:before {
        background-image: var(--asset-user-level2);
    }
    &.user-level-3:before {
        background-image: var(--asset-user-level3);
    }
    
    /* Abstract icon for main navigation bar */
    &.entity-inverse:before {
        background-image: var(--asset-user-white);
    }
    
    &.entity-inverse.user-impersonated:before {
        background-position: center -160px;
    }
    
    /* Icon-only variant */
    &.entity-icon {
        padding-left: 0;
        width: var(--icon-user-size);
    }
}


/* --- 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: calc(-1 * var(--icon-flyout-size) / 2);
        height: var(--icon-flyout-size);
        width: var(--icon-flyout-size);
        background: transparent var(--asset-arrow-flyout) center no-repeat;
        transition: var(--transition-transform);
    }
    
    &.flyout-active:after {
        transform: rotateX(180deg);
        transition: var(--transition-transform);
    }
    
    /* Interaction states */
    @media (hover: hover) {
        &:hover {
            color: var(--link-text-color-hover);
            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: var(--font-weight-medium);
    }
}


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

.tt-eins .substance-entity.entity-attachment {
    min-height: var(--icon-attachment-size);
    padding-left: calc(var(--icon-attachment-size) + 6px);
    padding-top: 4px;

    &.entity-icon {
        padding-left: 0;
        width: var(--icon-attachment-size);
    }

    &:before {
        content: "";
        height: var(--icon-attachment-size);
        width: var(--icon-attachment-size);
        background-image: var(--asset-placeholder-attachment);
    }

    &.attachment-file:before {
        background-image: var(--asset-placeholder-file);
    }

    &.attachment-image:before {
        background-image: var(--asset-placeholder-image);
    }
}

/* Interaction states */
@media (hover: hover) {
    .tt-eins .substance-entity.entity-attachment.entity-icon[title]:hover {
        cursor: help;
    }
}


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

.tt-eins .substance-entity.entity-goodwill {
    min-height: var(--icon-goodwill-size);
    line-height: var(--icon-goodwill-size);
    padding-left: calc(var(--icon-goodwill-size) + 6px);
    
    &:before {
        content: "";
        height: var(--icon-goodwill-size);
        width: var(--icon-goodwill-size);
        background-image: var(--asset-goodwill-requested);
    }
    
    &.entity-icon {
        padding-left: 0;
        width: var(--icon-goodwill-size);
    }
    
    &.goodwill-granted:before, 
    &.goodwill-denied:before {
        background-image: var(--asset-goodwill-granted);
    }
    
    &.goodwill-denied:before {
        transform: rotateX(180deg);
    }
}

/* Interaction states */
@media (hover: hover) {
    .tt-eins .substance-entity.entity-goodwill.entity-icon[title]:hover {
        cursor: help;
    }
}


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

/* --- Entity workflow state */
.tt-eins .substance-entity.entity-state {
    height: var(--chip-state-height);
    white-space: nowrap;
    border: 1px solid var(--entity-state-color);
    border-radius: var(--radius-chip);
    font: var(--chip-state-textset);
    line-height: var(--chip-state-height);
    letter-spacing: var(--spacing-state-small);
    padding: 0 6px 0 calc(var(--icon-state-size) + var(--chip-state-text-padding));
    color: var(--textcolor-standard);
    overflow: hidden;
    background: var(--backcolor-neutral-white);
    transition: var(--transition-color);
    
    /* Default is an ARCHIVED state */
    --entity-state-color: var(--color-state-archived);
    
    /* No text, only icon */
    &.entity-icon {
        padding: 0;
        width: var(--chip-state-icon-only-width);
    }
    
    /* Icon container */
    &:before {
        content: "";
        height: 100%;
        width: var(--chip-state-icon-pane);
        background: var(--entity-state-color) center center no-repeat;
    }
}

/* Restricted width when used as field label */
.tt-eins label .substance-entity.entity-state {
    max-width: 100%;
    text-overflow: ellipsis;
}

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

/* State cadence */
.tt-eins .substance-entity.entity-state {
    /* OPEN states */
    &.state-type-open {
        --entity-state-color: var(--color-state-open);
    }
    &.state-type-open:before {
        background-image: var(--asset-workflow-new);
    }
    
    /* REQUEST states (for opinion requests / waiting for answers) */
    &:is(.state-type-request, .state-type-request-complete, .state-type-request-working) {
        --entity-state-color: var(--color-state-requested);
    }
    &.state-type-request:before {
        background-image: var(--asset-workflow-request);
        background-position: right 1px center;
    }
    &.state-type-request-complete:before {
        background-image: var(--asset-workflow-request-complete);
        background-position: left 0 center;
    }
    &.state-type-request-working:before {
        background-image: var(--asset-workflow-request-working);
        background-position: center;
        background-size: calc(var(--icon-state-size) - 2px);
    }
    
    /* IN PROGRESS states */
    &.state-type-progress {
        --entity-state-color: var(--color-state-progress);
    }
    &.state-type-progress:before {
        background-image: var(--asset-workflow-progress);
    }
    
    /* READY states */
    &.state-type-ready {
        --entity-state-color: var(--color-state-ready);
    }
    &.state-type-ready:before {
        background-image: var(--asset-workflow-ready);
    }
    
    /* TRANSFER states */
    &.state-type-transfer {
        --entity-state-color: var(--color-state-transfer);
    }
    &.state-type-transfer:before {
        background-image: var(--asset-workflow-transfer);
    }
    
    /* COMPLETED states */
    &.state-type-done {
        --entity-state-color: var(--color-state-done);
    }
    &.state-type-done:before {
        background-image: var(--asset-workflow-done);
    }
}

/* 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: var(--textcolor-inverse);
    }
    
    .tt-eins a:hover .substance-entity.entity-state .substance-id > * {
        color: #000;
        color: initial;
    }
}


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

/* --- Standard communication channel icons */
.tt-eins .substance-entity.entity-channel {
    min-height: var(--icon-channel-size);
    padding-left: calc(var(--icon-channel-size) + 7px);
    padding-top: 2px;
    
    /* Icon-only variant */
    &.entity-icon {
        padding: 0;
        width: var(--icon-channel-size);
    }
    
    /* Icons */
    &:before {
        content: "";
        height: var(--icon-channel-size);
        width: var(--icon-channel-size);
    }

    &.channel-type-analog:before {
        background-image: var(--asset-channel-analog);
    }

    &.channel-type-app:before {
        background-image: var(--asset-channel-app);
    }

    &.channel-type-personal:before {
        background-image: var(--asset-channel-personal);
    }

    &.channel-type-voice:before {
        background-image: var(--asset-channel-voice);
    }

    &.channel-type-web:before {
        background-image: var(--asset-channel-web);
    }

    &.channel-type-email:before {
        background-image: var(--asset-channel-email);
    }

    &.channel-type-phone:before {
        background-image: var(--asset-channel-phone);
    }

    &.channel-type-fax:before {
        background-image: var(--asset-channel-fax);
    }

    &.channel-type-guarantee:before {
        background-image: var(--asset-channel-guarantee);
    }

    &.channel-type-system:before {
        background-image: var(--asset-channel-system);
    }
}


/* --- Channels with flyout functionality */
.tt-eins .substance-entity.entity-channel.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: calc(-1 * var(--icon-flyout-size) / 2);
        height: var(--icon-flyout-size);
        width: var(--icon-flyout-size);
        background: transparent var(--asset-arrow-flyout) center no-repeat;
        transition: var(--transition-transform);
    }
    
    &.flyout-active:after {
        transform: rotateX(180deg);
        transition: var(--transition-transform);
    }
    
    /* Interaction states */
    @media (hover: hover) {
        &:hover {
            color: var(--link-text-color-hover);
            transition: var(--transition-universal);
        }
    }
    
    &:focus-visible {
        outline: var(--focus-outline-standard);
        outline-offset: 3px;
    }
}


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

.tt-eins .substance-entity.entity-dunning {
    padding-left: 0;

    &.dunning-level-1 {
        font-weight: var(--timestamp-weight-emphasis);
    }
    
    &.dunning-level-2 {
        font-weight: var(--timestamp-weight-due);
    }

    &.dunning-level-3 {
        font-weight: var(--timestamp-weight-overdue);
    }
    
    &.dunning-verbose {
    }
    
    
    /* -- No icons (yet) */
    &:before {
        display: none;
    }
    
    
    /* -- Verbose prefix */
    &:not(.dunning-verbose) .dunning-title {
        display: none; 
    }

    
    /* -- Current dunning level */
    .dunning-value {
        color: inherit;
    }
}


/* !-------------------------------------------- */
/* !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: var(--font-weight-medium);
        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 & opinion index */
    .id-suffix.suffix-point, 
    .id-suffix.suffix-opinion {
        font-family: var(--font-id);
        background: var(--backcolor-id-suffix);
        display: inline-block;
        padding: 2px 3px 2px 3px;
        font-weight: var(--font-weight-bold);
        
        @media (hover: hover) {
            cursor: inherit;
        }
    }
    
    .id-suffix.suffix-point:only-child {
        margin-left: 0;
    }
}


/* !--- Semantic ID subtypes */
.tt-eins .substance-id.id-case, 
.tt-eins .substance-id.id-opinion, 
.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 #ensemble_main .link-action:has(> .substance-id) {
    height: var(--chip-id-linked-height);
    border: var(--link-id-border);
    border-radius: var(--radius-chip);
    padding: 0 6px 0 6px;
    background: var(--link-id-back);
    transition: var(--transition-color);
    
    --link-text-color: var(--textcolor-standard);
    
    &:has(> .substance-id .id-suffix.suffix-point), 
    &:has(> .substance-id .id-suffix.suffix-opinion) {
        padding-right: 0;
        overflow: hidden;
    }
    
    > .substance-id {
        line-height: calc(var(--chip-id-linked-height) - 1px);
    }
    
    > .substance-id .id-suffix:not(:is(.suffix-point, .suffix-opinion)) {
        margin-top: 4px;
    }
    
    /* Interaction states */
    @media (hover: hover) {
        &:hover {
            background-color: var(--link-id-back-hover);
            transition: var(--transition-color);
        }
    }
}

/* Large variant for headlines */
.tt-eins #ensemble_main h3 .link-action:has(> .substance-id) {
    height: var(--chip-id-linked-height-large);

    --link-text-color: var(--textcolor-accent);
    
    > .substance-id {
        font-size: inherit;
        font-weight: inherit;
        line-height: calc(var(--chip-id-linked-height-large) - 1px);
    }

    > .substance-id .id-prefix {
        font-size: inherit;
        font-weight: inherit;
    }
    
    > .substance-id .id-suffix {
        color: var(--textcolor-standard);
        padding-top: 4px;
        padding-bottom: 3px;
        position: relative;
        top: -1px;
    }
}


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

@media (hover: hover) {
    .tt-eins .substance-placeholder:hover {
       cursor: text;
    }
    
    .tt-eins :is(.link-action, .flyout-controller) > .substance-placeholder:hover {
       cursor: inherit;
    }
}


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

/* --- General container (supposed to be <time>) */
.tt-eins .substance-timestamp {
    display: block;
    position: relative;
    overflow: hidden;
    
    /* Interaction states */
    /* TODO: remove title="" exception when TE-7008 is deployed */
    @media (hover: hover) {
        &[title]:not([title=""]):hover {
            cursor: help;
        }
    }
}


/* --- Component containers */
.tt-eins .substance-timestamp {
    > * {
        display: block;
    }
    
    /* Qualifying title */
    .timestamp-title {
    }
    
    &.timestamp-untitled .timestamp-title {
        clip-path: inset(0 99.9% 0 0);
        text-indent: -1000em;
    }

    /* Day name */
    .timestamp-day {
        font-weight: var(--timestamp-weight-emphasis);
    }
    
    /* Full date string */
    .timestamp-date {
        font-weight: var(--timestamp-weight-emphasis);
        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;
    }
    
    /* Screenreader only: narrated state */
    .timestamp-state {
        text-indent: -1000em;
        width: 1px;
        height: 1px;
        clip: rect(1px, 1px, 1px, 1px);
        clip-path: inset(50%);
    }
}


/* --- Linear, single line display */
.tt-eins .substance-timestamp.timestamp-linear {
    white-space: nowrap;

    > * {
        display: inline-block;
    }
    
    /* Typographic delimiters */
    .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;
    }
    
    &.timestamp-untitled .timestamp-title:after {
        display: none;
    }
}


/* --- Stateful temporal object (deadline, validations, types) */
/* Icon assignment */
.tt-eins .substance-timestamp:is(.timestamp-deadline, .timestamp-due, .timestamp-overdue, .timestamp-transferred, .timestamp-finished, .timestamp-created, .timestamp-completed, .timestamp-answered) {
    /* State icon attached to specific inner element */
    > *:first-child, 
    &.timestamp-untitled > *:nth-child(2) {
        padding-left: 1.15em;
        position: relative;
    }
    
    &.timestamp-untitled .timestamp-title {
        padding-left: 0;
    }
    
    /* State icon initialization */
    > *:first-child:before, 
    &.timestamp-untitled > *:nth-child(2):before {
        content: "";
        display: block;
        position: absolute;
        top: 0.5cap;
        left: 0;
        width: 0.85em;
        height: 0.85em;
        background: transparent center no-repeat;
        background-size: 100%;
    }
    
    &.timestamp-deadline > *:first-child:before, 
    &.timestamp-untitled.timestamp-deadline > *:nth-child(2):before {
        background-image: var(--asset-validation-deadline);
        width: 0.9em;
        height: 0.9em;
    }
    
    &.timestamp-due > *:first-child:before,
    &.timestamp-untitled.timestamp-due > *:nth-child(2):before {
        background-image: var(--asset-validation-warn);
    }
    
    &.timestamp-overdue > *:first-child:before, 
    &.timestamp-untitled.timestamp-overdue > *:nth-child(2):before {
        background-image: var(--asset-validation-crisis);
        top: 0.14em;
    }

    &.timestamp-transferred > *:first-child:before, 
    &.timestamp-untitled.timestamp-transferred > *:nth-child(2):before {
        background-image: var(--asset-validation-transferred);
    }
    
    &.timestamp-finished > *:first-child:before, 
    &.timestamp-untitled.timestamp-finished > *:nth-child(2):before {
        background-image: var(--asset-validation-finished);
    }

    &.timestamp-created > *:first-child:before, 
    &.timestamp-untitled.timestamp-created > *:nth-child(2):before {
        background-image: var(--asset-validation-created);
    }

    &.timestamp-completed > *:first-child:before, 
    &.timestamp-untitled.timestamp-completed > *:nth-child(2):before {
        background-image: var(--asset-validation-completed);
    }

    &.timestamp-answered > *:first-child:before, 
    &.timestamp-untitled.timestamp-answered > *:nth-child(2):before {
        background-image: var(--asset-validation-answered);
    }
}

/* Due deadlines: component formatting */
.tt-eins .substance-timestamp.timestamp-deadline:is(.timestamp-due, .timestamp-overdue) {
    .timestamp-title {
    }
    
    .timestamp-date {
        font-weight: var(--timestamp-weight-due);
    }
    
    .timestamp-relative {
        font-weight: var(--timestamp-weight-due);
    }
}

.tt-eins .substance-timestamp.timestamp-deadline.timestamp-today {
    .timestamp-relative {
        font-weight: var(--timestamp-weight-emphasis);
    }
}

/* Special cases: altered deadline icon for special ObjectView contexts */
#actor_header .header-attributes .substance-timestamp:not(:is(.timestamp-due, .timestamp-overdue)) {
    &.timestamp-deadline > *:first-child:before, 
    &.timestamp-untitled.timestamp-deadline > *:nth-child(2):before {
        background-image: var(--asset-validation-deadline-red);
        top: 0.07em;
        left: -0.1em;
        width: 1em;
        height: 1em;
    }
}

#actor_incident .block-controller h3 > .substance-timestamp:not(:is(.timestamp-due, .timestamp-overdue)) {
    &.timestamp-deadline > *:first-child:before, 
    &.timestamp-untitled.timestamp-deadline > *:nth-child(2):before {
        background-image: var(--asset-validation-deadline-red);
    }
}


/* --- Compact deadline display */
.tt-eins .substance-timestamp.timestamp-deadline:has(.timestamp-relative.relative-compact) {
    display: inline-block;
}

/* Inner construction */
.tt-eins .substance-timestamp .timestamp-relative.relative-compact {
    /* Prefix for past/future direction */
    .compact-value:before {
        content: "–";
        font: var(--timestamp-compact-prefix-textset);
        line-height: 13px;
    }
    
    &.compact-future .compact-value:before {
        content: "+";
        display: inline-block;
        margin-right: 0.05em;
        position: relative;
        top: 0.1ex;
    }
    
    /* Unit in days */
    .compact-unit:before {
        content: " ";
    }
    
    .compact-unit {
        display: none; /* for the time being we don't display the unit suffix */
    }
}

/* Due compact deadlines */
.tt-eins .substance-timestamp:has(.timestamp-relative.relative-compact):is(.timestamp-due, .timestamp-overdue) {
        font-weight: var(--timestamp-weight-emphasis);
        
        .compact-value:before {
            font-weight: var(--timestamp-weight-overdue);
        }
}

/* For the moment we're removing deadline validation icons from compact displays (only used in ListViews) */
#actor_list .substance-table td > .substance-timestamp.timestamp-deadline, 
.tt-eins .substance-timestamp.timestamp-deadline:has(.timestamp-relative.relative-compact) {
    .timestamp-relative {
        padding-left: 0;    
    }
    
    .timestamp-relative:before {
        display: none;
    }
}


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

/* --- Standard counter */
.tt-eins .substance-counter {
    display: inline-block;
    color: var(--chip-counter-text-color);
    font: var(--chip-counter-textset);
    height: var(--chip-counter-height);
    line-height: calc(var(--chip-counter-height) - 2px);
    min-width: var(--chip-counter-height);
    text-align: center;
    text-indent: 0;
    background: var(--chip-counter-backcolor-dominant);
    border: 1px solid var(--chip-counter-bordercolor);
    padding: 0 var(--chip-counter-padding-horizontal) 0 var(--chip-counter-padding-horizontal);
    border-radius: var(--radius-counter);

    &.counter-type-light {
        color: var(--chip-counter-text-color-light);
        background: var(--chip-counter-backcolor-light);
        border-color: var(--chip-counter-bordercolor-light);
    }
}

/* Context: in navigation menus */
.tt-eins .substance-menu .molecule .substance-counter.counter-zero {
    border-color: var(--chip-counter-bordercolor-zero);
    color: var(--chip-counter-text-color-zero);
}


/* --- Bubble version in main navigation */
.tt-eins .substance-counter.counter-size-mini {
    background-color: var(--chip-counter-backcolor);
    font: var(--chip-counter-textset-bubble);
    line-height: calc(var(--chip-counter-height) - 2px);
    padding: 0 var(--chip-counter-mini-padding-horizontal) 0 var(--chip-counter-mini-padding-horizontal);

    /* Validated states */
    &.counter-level-ok {
        background-color: var(--chip-counter-backcolor-state-ok);
        color: var(--chip-counter-text-color-bubble);
    }
    
    &.counter-level-warn {
        background-color: var(--chip-counter-backcolor-state-warn);
        color: var(--chip-counter-text-color-bubble);
    }
    
    &.counter-level-crisis {
        background-color: var(--chip-counter-backcolor-state-crisis);
    }
    
    /* Zero counters stay hidden here */
    &.counter-zero {
        display: none;
    }
}


/* --- Variant: selection counters with flyout (mix of primary and secondary action) */
.tt-eins .substance-counter.flyout-controller {
    padding-right: 23px;
    position: relative;
    transition: var(--transition-universal);
    
    &.counter-zero {
        font-weight: var(--font-weight-regular);
    }
    
    &.counter-type-light {
        border: var(--button-primary-border);
        color: var(--button-primary-text-color);
    }
    
    /* Arrow */
    &:after {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        right: 4px;
        margin-top: calc(-1 * var(--icon-flyout-size) / 2);
        height: var(--icon-flyout-size);
        width: var(--icon-flyout-size);
        background: transparent var(--asset-arrow-flyout-white) center no-repeat;
        transition: var(--transition-transform);
    }
    
    &.counter-type-light:after {
        background-image: var(--asset-arrow-flyout);
    }
    
    &.flyout-active:after {
        transform: rotateX(180deg);
        transition: var(--transition-transform);
    }
    
    /* Interaction states */
    @media (hover: hover) {
        &:hover {
            background: var(--chip-counter-backcolor-hover);
            color: var(--chip-counter-text-color);
            transition: var(--transition-universal);
        }
        
        &.counter-type-light:hover {
            background: var(--chip-counter-backcolor-light-hover);
            border: var(--button-primary-border-hover);
            color: var(--button-primary-text-color-hover);
        }
    }
    
    &: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: calc(var(--icon-action-size) + var(--button-secondary-padding-horizontal) + 2px);
    position: relative;
    transition: var(--transition-universal);

    &:before {
        content: "";
        position: absolute;
        display: block;
        height: var(--icon-action-size);
        width: var(--icon-action-size);
        top: 50%;
        left: calc((var(--button-secondary-padding-horizontal) + 2px) / 2);
        transform: translateY(-50%);
        background: transparent var(--asset-action-download-white) center no-repeat;
    }
    
    /* Interaction states */
    @media (hover: hover) {
        &:hover {
            background-color: var(--chip-counter-backcolor-hover);
            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 {
    padding: 10px 20px 10px 20px;
    background: var(--backcolor-message);
    color: var(--message-body-textcolor);
    
    /* FOR DEMO ONLY */
    &.message-dormant {
        display: none !important;
    }
    
    /* --- Message headline */
    .substance-richtext h4 {
        /* Headline and description */
        padding-left: 24px;
        background: transparent 0 0 no-repeat;
        background-size: 17px;
        font: var(--message-head-textset);
        margin-bottom: 0.5em;
        color: var(--message-head-textcolor);
    }
    
    .substance-richtext h4:only-child {
        margin-bottom: 0;
    }
    
    /* State adaption of main message headline */
    &.message-level-info .substance-richtext h4 {
        background-image: var(--asset-validation-info);
    }

    &.message-level-ok .substance-richtext h4 {
        background-image: var(--asset-validation-ok);
        background-position: 0 1px;
    }

    &.message-level-warn .substance-richtext h4 {
        background-image: var(--asset-validation-warn);
        background-position: 0 -1px;
    }

    &.message-level-crisis .substance-richtext h4 {
        background-image: var(--asset-validation-crisis);
    }

    &.message-level-suspicious .substance-richtext h4 {
        background-image: var(--asset-validation-suspicious);
    }
    
    
    /* --- Embedded primary actions */
    .primary-action.action-size-mini {
    }
    
    /* --- Timestamps */
    /* Direct placement, like in notifications */
    > .substance-timestamp {
        font: var(--textset-s);
        margin-top: 10px;
        text-align: right;
    }
}

/* Phone viewports */
@media only screen and (max-width: 680px) {
    /* State adaption of message box */
    .tt-eins .substance-message {
        color: var(--message-body-textcolor-mobile);
        border: 1px solid transparent;
        
        &.message-level-info {
            background: var(--backcolor-message-info);
            border-color: var(--linecolor-message-info);
        }

        &.message-level-ok {
            background: var(--backcolor-message-ok);
            border-color: var(--linecolor-message-ok);
        }
        
        &.message-level-warn {
            background: var(--backcolor-message-warn);
            border-color: var(--linecolor-message-warn);
        }

        &.message-level-crisis {
            background: var(--backcolor-message-crisis);
            border-color: var(--linecolor-message-crisis);
        }
        
        
        /* --- Message headline */
        .substance-richtext h4 {
            color: var(--message-head-textcolor-mobile);
        }
    }
}


/* --- Message body text */
.tt-eins .substance-message .substance-richtext {
    font: var(--message-body-textset);
    
    /* Bolder timestamps inside headlines */
    .substance-richtext h4 .substance-timestamp * {
        font-weight: var(--font-weight-medium);
    }

    /* ID objects embedded in message */
    .substance-id {
        font-size: inherit;
    }
    
    h4 .substance-id {
        font-weight: var(--font-weight-medium);
        line-height: inherit;
    }
    
    h4 .substance-id.id-verbose .id-prefix {
        font: var(--textset-minus-l);
        font-weight: var(--font-weight-medium);
    }
    
    .substance-id .id-suffix.suffix-point {
        padding-top: 1px;
        padding-bottom: 1px;
        position: relative;
    }
}

/* Different color for ID point markers when placed in specific contexts */
.tt-eins .substance-message:is(#actor_navigation .list-new .substance-message) .substance-richtext .substance-id, 
.tt-eins .substance-message:is(.flyout-host .menu-info .substance-message) .substance-richtext .substance-id {
    --backcolor-id-suffix: var(--backcolor-id-suffix-inverse);
}


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

.tt-eins .substance-communication {
    padding: 10px;
    border: 1px solid transparent !important;
    background: var(--backcolor-neutral-white) 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: var(--asset-validation-warn) !important;
    }
    
    &.communication-blocked, 
    &.communication-fail {
        border-color: var(--color-state-crisis) !important;
        background-color: var(--color-state-crisis-light) !important;
        background-image: var(--asset-validation-crisis) !important;
    }
    
    /* Error message */
    .communication-message {
        color: var(--textcolor-emphasis) !important;
        font-weight: var(--font-weight-medium) !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: var(--field-optional-suffix);
    font-weight: var(--field-label-optional-weight);
}


/* --- 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(--button-uploader-textset);
        font-weight: var(--font-weight-medium);
        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: var(--backcolor-neutral-white);
        border-radius: 0;
    }
    
    .dz-preview.dz-file-preview .dz-image, 
    .dz-preview.dz-image-preview .dz-image:has(img[src="withoutThumbnail"]) {
        background: var(--backcolor-uploader-thumbnail);
    }
    
    .dz-preview.dz-file-preview .dz-image img:not([src]), 
    .dz-preview.dz-image-preview .dz-image img[src="withoutThumbnail"] {
        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: var(--linecolor-neutral-white);
        border-radius: var(--radius-panel);
        background-color: var(--transity-white-70);
        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: var(--transity-white-40) 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: var(--asset-validation-ok);
    }
    
    .dz-error-mark {
        background-image: var(--asset-validation-crisis);
    }
}


/* --- 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: var(--font-weight-regular);
        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: var(--textcolor-inverse);
    text-shadow: 0 0 4px var(--transity-black-10);
}

.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(--button-secondary-textset);
    font-weight: var(--font-weight-medium);
    line-height: var(--button-secondary-height);
    text-align: left;
    margin-top: 10px;
    border: var(--button-secondary-border);
}

/* Interaction states */
@media (hover: hover) {
    .tt-eins .substance-uploader .dropzone .dz-preview .dz-remove:hover {
        text-decoration: none;
        border: var(--button-secondary-border-hover);
    }
}

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


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

/* --- Master container */
.tt-eins .substance-richtext {
    hyphens: auto;

    &.richtext-foreign {
        white-space: pre-line;
    }
    
    &.richtext-truncated {
        line-clamp: 3;
        -webkit-line-clamp: 3;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }
}


/* --- 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: var(--font-weight-regular);
        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.8em;
    }
    
    /* Emphasis */
    em, 
    b {
        font-weight: var(--font-weight-medium);
    }
    
    strong {
        font-weight: var(--font-weight-black);
    }
    
    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: var(--font-weight-medium);
        word-break: break-all;
        -ms-word-break: break-all;
    }
}


/* --- Embedded links */
.tt-eins .substance-richtext {
    a {
        font-weight: var(--link-text-richtext-weight);
        display: inline;
    }
    
    a:not([class]) {
        color: var(--link-text-richtext-color);
        -webkit-text-decoration: var(--link-text-richtext-decoration);
                text-decoration: var(--link-text-richtext-decoration);
        transition: var(--transition-color);
    }
    
    /* Text only visible for screenreaders */
    a .link-hiddentext {
       clip: rect(1px, 1px, 1px, 1px);
       clip-path: inset(50%);
       height: 1px;
       overflow: hidden;
       position: absolute;
       white-space: nowrap;
       width: 1px;
       margin: -1px; 
    }
    
    /* Abstract Unicode arrow icon */
    a:before, 
    .link-action:before {
        content: var(--link-text-richtext-symbol);
        color: inherit;
        font-weight: var(--font-weight-light);
    }
    
    /* Interaction states */
    @media (hover: hover) {
        a:not([class]):hover {
            color: var(--link-text-richtext-color-hover);
            transition: var(--transition-color);
        }
    }
    
    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;
}


/* --- Embedded entities */
.tt-eins .substance-richtext .substance-entity.entity-attachment {
    display: block;
}


/* --- Embedded file lists */
.tt-eins .substance-richtext .richtext-filelist {
    div {
        display: flex;
        flex-direction: row-reverse;
        -moz-column-gap: 12px;
             column-gap: 12px;
        align-items: center;
    }
    
    div + div {
        margin-top: 8px;
    }
    
    dd {
        flex-grow: 1;
    }
}


/* --- Bullet lists */
.tt-eins .substance-richtext {
    ul, 
    ol {
        margin-bottom: 0.8em;
    }
    
    ol {
        counter-reset: li;
    }
    
    /* List elements */
    li {
        padding-left: 15px;
        position: relative;
        margin-bottom: 0.6em;
    }
    
    ol li {
        padding-left: 30px;
        margin-bottom: 0.7em;
    }
    
    li:last-child {
        margin-bottom: 0;
    }
    
    /* Bullet points */
    /* In Textpicker tooltip previews we pull back list styling to make it look like in TinyMCE */
    ul li:before {
        content: "";
        display: block;
        position: absolute;
        left: 0;
    }

    &:not(.substance-textpicker .tooltip-container) ul li:before {
        top: 0.25lh;
        height: 8px;
        width: 8px;
        background: var(--backcolor-bullet);
        border-radius: 50%;
    }
    
    ul li:is(.substance-textpicker .tooltip-container ul li):before {
        content: "•";
        font-weight: var(--font-weight-bold);
    }
    
    /* Index counters */
    /* In ALL tooltip previews we pull back list styling to make it look like in TinyMCE */
    ol li:before {
        content: counter(li);
        counter-increment: li;
        display: block;
        position: absolute;
        left: 0;
        top: -3px;
    }

    &:not(.tooltip-container) ol li:before {
        background: var(--backcolor-bullet);
        border-radius: 50%;
        height: 22px;
        width: 22px;
        border: none;
        font-weight: var(--font-weight-bold);
        line-height: 22px;
        text-align: center;
        color: var(--textcolor-inverse);
    }
    
    ol li:is(.tooltip-container ol li):before {
        content: counter(li) ".";
        font-weight: var(--font-weight-bold);
        top: 0;
    }
    
    /* Content of list items */
    li p {
        margin-bottom: 0.25em;
    }
}


/* --- 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: var(--line-blockquote);

    *:last-child {
        margin-bottom: 0;
    }
    
    &.richtext-scrollpart {
        max-height: 25dvh;
        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%;
    font: var(--table-route-body-textset);
    color: var(--textcolor-standard);
    margin: 20px 0 10px 0;
}


/* --- Column titles */
.tt-eins .substance-route .route-title {
    display: table-row;
    
    .title-item {
        display: table-cell;
        padding: var(--table-route-head-padding);
        font: var(--table-route-head-textset);
    }
}


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

/* Single leg of a trip */
.tt-eins .substance-route .route-stop {
    display: table-row;
    transition: var(--transition-color);
    
    /* Selected trip leg */
    &.item-active {
        background: var(--backcolor-selection);
        color: var(--textcolor-emphasis);
        transition: var(--transition-color);
    }
    
    /* Highlight of selectable trip leg */
    /* Last station contains select button: we highlight also the preceding station (from/to pair) */
    @media (hover: hover) {
        &.stop-last:not(:is(.route-ineligible, .item-active)):hover, 
        &:has(+ .route-stop.stop-last:not(:is(.route-ineligible, .item-active)):hover) {
            background: var(--backcolor-table-row-hover);
            transition: var(--transition-color);
        }
    }
}


/* --- Route entry properties */
/* General properties of a single leg */
.tt-eins .substance-route .route-stop {
    .stop-item {
        border-top: var(--route-stop-separator);
        display: table-cell;
        padding: var(--table-route-body-padding);
        vertical-align: middle;
        
        &:empty {
            content-visibility: hidden;
        }
    }
    
    /* Unselectable trip leg */
    &.route-ineligible .stop-item {
        opacity: 0.6;
    }
    
    /* Selected trip leg */
    &.item-active {
        .stop-item {
            border-top: var(--route-stop-active-separator);
        }

        .stop-station, 
        .stop-departure, 
        .stop-arrival {
            font-weight: var(--table-route-active-weight);
        }
        
        .substance-entity.trip-aspect-stop, 
        .substance-entity.trip-aspect-line, 
        .substance-entity.entity-vehicle {
            color: var(--textcolor-emphasis);
        }
    }
    
    /* Leg separator */
    &:first-child .stop-item {
        border-top: var(--route-group-separator);
    }
}

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

/* Station name */
.tt-eins .substance-route .route-stop .stop-station {
    color: var(--textcolor-accent);
    
    .substance-entity.entity-trip.trip-aspect-stop {
        padding-top: 0;
    }
}

/* Last leg of a trip (arrival) */
.tt-eins .substance-route .route-stop.stop-last {
    .stop-line, 
    .stop-helper {
        border-top: none;
    }
    
    /* Line title with vehicle icon */
    .stop-line {
        font-weight: var(--font-weight-bold);
    }
    
    /* Cell with selection button or dismissal notice */
    &.route-ineligible .stop-helper {
        font: var(--table-route-body-helper-textset);
    }
    
    .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;
        
        --stop-icon-inset: 32px;
        
        .route-title {
            display: none;
        }
    }


    /* --- Route entry containers */
    .tt-eins .substance-route .route-group {
        display: block;
        margin-bottom: 10px;
        
        + .route-group {
            border-top: var(--route-group-separator-mobile);
            padding-top: 10px;
        }
    }
    
    /* Single leg of a trip */
    .tt-eins .substance-route .route-stop {
        display: flex;
        flex-wrap: wrap;
        padding-left: var(--stop-icon-inset);
        padding-top: 5px;
        
        + .route-stop {
            border-top: var(--route-stop-separator);
            margin-top: 5px;
            padding-top: 5px;
        }
        
        + .route-stop.stop-last {
            border-top: var(--route-stop-separator-mobile);
        }
        
        + .route-stop.stop-last.item-active {
            border-top: var(--route-stop-active-separator);
            margin-top: 0;
        }
    }

    
    /* --- Route entry properties */
    .tt-eins .substance-route .route-stop {
        /* General properties of a single leg */
        .stop-item {
            display: block;
            border: none;
            padding: 0;
            margin-bottom: 1px;
            
            &:empty {
                content-visibility: auto;
            }
        }
        
        &:first-child .stop-item {
            border: none;
        }
        
        /* Station name */
        .stop-station {
            width: calc(100% + var(--stop-icon-inset));
            margin-left: calc(-1 * var(--stop-icon-inset));
        }
        
        /* Particular leg properties */
        .stop-date, 
        .stop-departure, 
        .stop-arrival, 
        .stop-track {
            margin-bottom: 2px;
        }
    
        .stop-date {
            margin-left: -2px;
        }
        
        .stop-date:before {
            content: attr(aria-label) " ";
            font-weight: var(--table-route-emphasis-weight);
        }
        
        .stop-track {
            &:empty {
                display: none;
            }
            
            &:before {
                content: attr(aria-label) " ";
                margin-left: 0.25em;
            }
        }
        
        .stop-departure, 
        .stop-arrival {
            font-weight: var(--table-route-emphasis-weight);
            margin-left: 0.25em;
            
            &:empty {
                display: none;
            }
        }
        
        /* Line title with vehicle icon */
        .stop-line {
            width: 100%;
            margin-left: -2px;
            
            &:empty {
                display: none;
            }
            
            span {
                margin-top: 10px;
            }
        
            &:before {
                content: attr(aria-label) " ";
            }
        }
    }
    
    
    /* --- Cell with selection button or dismissal notice */
    .tt-eins .substance-route .route-stop .stop-helper {
        padding-top: 15px;
        margin-left: -2px;
        
        &:empty {
            display: none;
        }
        
        .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(--table-body-textset-mobile);
        }
    
        .stop-date, 
        .stop-departure, 
        .stop-arrival, 
        .stop-track {
            font: var(--table-route-body-essentials-textset-mobile);
            margin-top: 2px;
        }
        
        /* Line title with vehicle icon */
        .stop-line {
            font: var(--table-route-body-essentials-textset-mobile);
        }
    }


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

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

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

/* --- Grand container */
#actor_navigation {
    display: flex;
}


/* --- Environment markers */
.stage:is(.environment-dev, .environment-mirror, .environment-qa, .environment-rtp) {
    /* Icon */
    &:before {
        content: "";
        position: absolute;
        top: calc(var(--main-top-padding) + var(--main-navigation-height) / 2);
        left: 50%;
        margin-top: calc(-1 * var(--icon-environment-size) / 2 - 1px);
        margin-left: calc(-1 * var(--site-width) / 2 - var(--icon-environment-size) - 18px);
        width: var(--icon-environment-size);
        height: var(--icon-environment-size);
        background: transparent center no-repeat;
        background-size: var(--icon-environment-size);
        z-index: 15;
    }
    
    &:is(.environment-dev, .environment-rtp):before {
        background-image: var(--asset-validation-crisis);
    }
    
    &.environment-mirror:before {
        background-image: uvar(--asset-validation-warn);
    }
    
    &.environment-qa:before {
        background-image: var(--asset-validation-ok);
    }
    
    &:not(:has(#actor_navigation)):before {
        display: none;
    }
    
    /* Warning bar */
    #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;
    }
    
    /* Text marker */
    #actor_navigation:after {
        content: "";
        position: absolute;
        top: 0;
        right: calc(100% + var(--icon-environment-size) + 26px);
        width: auto;
        text-align: right;
        font: var(--textset-plus-s);
        font-weight: var(--font-weight-black);
        letter-spacing: var(--spacing-env-marker);
        line-height: var(--main-navigation-height);
        color: var(--textcolor-inverse);
        text-shadow: var(--shadow-text-env-marker-dark);
    }
    
    &.environment-dev #actor_navigation:after {
        content: var(--env-marker-dev);
    }
    
    &.environment-mirror #actor_navigation:after {
        content: var(--env-marker-mirror);
    }
    
    &.environment-qa #actor_navigation:after {
        content: var(--env-marker-qa);
    }
    
    &.environment-rtp #actor_navigation:after {
        content: var(--env-marker-rtp);
    }
}

/* Small desktop + tablet viewports */
@media only screen and (max-width: 1340px) {
    .stage:is(.environment-dev, .environment-mirror, .environment-qa, .environment-rtp) {
        /* Icon */
        &:before {
            left: 100%;
            margin-left: calc(-1 * var(--icon-environment-size) - 2px);
        }
        
        &:not(.stage-login):before {
            left: calc(var(--logo-rms-container-width) + 4px);
        }
        
        /* Warning bar */
        #actor_navigation:before {
            display: none;
        }
        
        /* Text marker */
        #actor_navigation:after {
            right: calc(var(--icon-environment-size) + 14px);
        }
        
        &:not(.stage-login) #actor_navigation:after {
            display: none;
        }
    }
}

/* Phone viewports */
@media only screen and (max-width: 680px) {
    .stage:is(.environment-dev, .environment-mirror, .environment-qa, .environment-rtp) {
        /* Icon */
        &:not(.stage-login):before {
            left: var(--logo-rms-container-width);
            left: var(--logo-client-width, var(--logo-rms-container-width));
            margin-left: calc(-1 * var(--icon-environment-size) / 2);
        }
        
        &.stage-login:before {
            left: 100%;
            margin-left: calc(-1 * var(--icon-environment-size) - 4px);
        }

        /* Login page: Text marker */
        #actor_navigation:after {
            font: var(--textset-s);
            line-height: var(--main-navigation-height);
        }
    }
}


/* --- Major group containers */
#actor_navigation {
    /* Product flyout */
    .navigation-product {
        margin-right: 10px;
    }
    
    /* Main application menus */
    .navigation-section {
        margin-right: auto;
    }
    
    /* Cross-feature containers with flyouts */
    .navigation-search, 
    .navigation-notification, 
    .navigation-message, 
    .navigation-user {
        display: flex;
        align-items: center;
        position: relative;
        height: var(--main-navigation-height);
        border-left: var(--line-separator-menu);
        transition: var(--transition-color);
    }
    
    .navigation-user {
        order: 10;
    }
    
    .navigation-search {
        order: 9;
    }
    
    .navigation-notification {
        order: 8;
    }
    
    .navigation-notification:not(:has(+ .navigation-message)) {
        border-left: none;
    }
    
    .navigation-message {
        border-left: none;
    }
    
    /* Interaction states */
    @media (hover: hover) {
        .navigation-product:hover, 
        .navigation-section .cell:not(#section_create):hover, 
        .navigation-notification:hover, 
        .navigation-message:hover, 
        .navigation-search:hover, 
        .navigation-user:hover {
            background-color: var(--button-menu-back-hover);
            transition: var(--transition-color);
        }
    }
    
    /* Highlight current section */
    .cell[data-navkey] {
        &:not(.item-active) {
            border-bottom-color: transparent; /* init value for transition */
        }
        
        &.item-active {
            border-bottom: var(--line-signature-white);
        }
        
        &.item-active .menu-action {
            font-weight: var(--button-menu-active-weight);
        }
    }
}

/* Phone viewports */
@media only screen and (max-width: 680px) {
    #actor_navigation {
        /* Product flyout */
        .navigation-product {
            margin-right: 16px;
        }
        
        /* Main application menu */
        .navigation-section {
            margin-left: 0;
            margin-right: 0;
        }
        
        /* Distance to right edge of viewport */
        &:not(:has(.navigation-notification)) .navigation-section {
            margin-right: var(--site-gutter-mobile);
        }
    }
}


/* --- Application logo & product flyout */
#actor_navigation .navigation-product {
    font: var(--textset-m);
    width: var(--logo-rms-container-width);
    height: 100%;
    margin-left: -10px;
    background: transparent center no-repeat;
    transition: var(--transition-color);
    
    /* Make the button invisible but keep it clickable */
    .substance-flyout, 
    .substance-flyout .flyout-controller {
        height: 100%;
        width: 100%;
        color: transparent;
    }
    
    .substance-flyout .flyout-controller:focus-visible {
        outline: var(--focus-outline-inverse);
        outline-offset: -5px;
    }
}

/* Small desktop + tablet viewports */
@media only screen and (max-width: 1340px) {
    #actor_navigation .navigation-product {
        margin-left: 0;
    }
}

/* Phone viewports */
@media only screen and (max-width: 680px) {
    #actor_navigation {
        /* Login page only has this flyout controller, nothing else */
        &:not(:has(.navigation-section)) .navigation-product {
            margin-left: -8px;
        }
        
        .navigation-product {
            margin-left: 0;
        }
    }
}

/* Pure logo marks */
.stage.brand-rms {
    &.rms-am #actor_navigation .navigation-product {
        background-image: var(--asset-logo-rms-AM-white);
    }
    
    &.rms-km #actor_navigation .navigation-product {
        background-image: var(--asset-logo-rms-KM-white);
    }
    
    &.rms-pm #actor_navigation .navigation-product {
        background-image: var(--asset-logo-rms-PM-white);
    }
    
    &.rms-admin #actor_navigation .navigation-product {
        background-image: var(--asset-logo-rms-Admin-white);
    }
}

/* Login page: logo + wordmark for Admin */
.stage-login.brand-rms.rms-admin #actor_navigation .navigation-product {
    background-image: var(--asset-logo-rms-wordmark-Admin-white);
    width: var(--logo-rms-admin-container-width);
}


/* --- Section menu */
#actor_navigation .navigation-section {
    > ul {
        display: flex;
    }
    
    .cell {
        border-left: var(--line-separator-menu);
        height: var(--main-navigation-height);
        transition: var(--transition-color);
    }
    
    .cell:first-child {
        border-left: none;
    }
    
    .menu-action {
        line-height: var(--main-navigation-height);
        transition: var(--transition-color);
    }
    
    /* Creator entry */
    #section_create {
        border-left: none;
        display: flex;
        align-items: center;
        height: var(--main-navigation-height);
        margin-left: 15px;
        
        .substance-flyout {
            height: var(--button-menu-height);
        }
        
        .menu-action {
            position: relative;
            padding-left: 36px;
            border: var(--button-secondary-inverse-border);
            border-radius: var(--radius-interaction);
            height: var(--button-menu-height);
            line-height: calc(var(--button-menu-height) - 1px); /* offset border-width */
        }
        
        .menu-action:before {
            content: "";
            position: absolute;
            display: block;
            height: var(--icon-action-size);
            width: var(--icon-action-size);
            top: 50%;
            left: 8px;
            transform: translateY(-50%);
            background: transparent center var(--asset-action-add-white) no-repeat;
        }
        
        /* Creator entry with flyout (for several creators to choose from) */
        .menu-action.flyout-controller {
            background: transparent;
        }
        
        /* Interaction states */
        @media (hover: hover) {
            .menu-action:hover {
                background-color: var(--button-menu-back-hover);
                transition: var(--transition-color);
            }
        }
    }
}

/* Phone viewports */
@media only screen and (max-width: 680px) {
    #actor_navigation .navigation-section {
        flex-grow: 1;
        
        ul {
            justify-content: space-around;
        }
        
        &:not(:has(+ .navigation-notification)) {
            /* If there's no neigboring notifications controller, we center the main entry */
            .cell:first-child {
                position: absolute;
                left: 50dvw;
                transform: translateX(-50%);
                z-index: 10;
            }
            
            /* And push the last entry to the right edge */
            #section_create {
                margin-left: auto;
            }
        }
    }
}


/* --- Global search, Notifcations + System messages are handled in .substance-entity management */


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

    .substance-flyout {
        padding: 0 15px 0 15px;
        margin-right: -15px;
        
        --vertical-flyout-offset: 18px;
    }
    
    .flyout-controller.entity-user {
        color: var(--button-menu-text-color);
        padding-right: 0;
        padding-left: 34px;
        height: 26px;
        top: -2px;
    }
    
    .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: var(--button-menu-text-color);
        }
    }
    
    .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 (adjusted via client_primary.css) */
    .product-client {
        padding-top: 16px;
        padding-bottom: 8px;
        margin-bottom: 15px;

        img {
            display: inline-block;
            height: 40px;
        }
    }
    
    /* Product data */
    .info-product {
        .product-title {
            color: var(--textcolor-accent);
            font-weight: var(--font-weight-medium);
            margin-bottom: 15px;
        }
        
        .product-title em:after {
            content: " ";
        }
        
        .product-version:not(:last-child) {
            margin-bottom: 5px;
        }
        
        :is(.product-version, .product-revision) em:after {
            content: ": ";
        }
    }

    /* Support information */
    .info-support {
        .support-title {
            color: var(--subhead-textcolor);
            font: var(--subhead-textset);
            letter-spacing: var(--spacing-subhead);
            text-transform: var(--subhead-transform);
            margin-bottom: 15px;
        }
        
        em {
            color: var(--textcolor-accent);
        }
        
        em:after {
            content: ": ";
        }
        
        .email-action {
            display: inline-block;
            margin-left: 3px;
        }
    }
    
    /* Software vendor */
    .info-vendor {
        background-color: var(--backcolor-neutral-white);
        padding-top: 20px;
        
        .vendor-subline {
            margin-top: 8px;
        }
        
        .vendor-subline .link-action {
            padding-top: 47px;
            font-weight: var(--font-weight-medium);
            transition: var(--transition-color);
            background: transparent left top no-repeat;
            background-size: 160px auto;
        }
        
        @media (hover: hover) {
            .vendor-subline .link-action:hover {
                color: var(--textcolor-accent);
                transition: var(--transition-color);
            }
        }
        
        p {
            color: var(--textcolor-standard);
            font: var(--textset-plus-s);
            font-weight: var(--font-weight-regular);
        }
        
        .vendor-title {
            margin-bottom: 0;
        }
    }
}

/* Phone viewports */
@media only screen and (max-width: 680px) {
    #actor_navigation .navigation-product .flyout-host {
        width: calc(var(--site-width) - 1 * var(--site-gutter-mobile));
        
        .info-product {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-column-gap: 16px;
            -moz-column-gap: 16px;
                 column-gap: 16px;
            grid-row-gap: 0;
            row-gap: 0;
            
            .product-client {
                padding-top: 8px;
                grid-column: 1 / 3;
            }
            
            .product-title {
                grid-column: 1 / 3;
            }
        }
        
        .info-product :is(.product-version, .product-revision) em {
            display: block;
        }
        
        .menu-section .primary-action {
            width: 100%;
        }
    }
}

/* Product flyout: rms product branding */
.stage.brand-rms {
    &.rms-admin #actor_navigation .navigation-product .info-vendor .vendor-subline .link-action {
        background-image: var(--asset-logo-rms-wordmark-Admin);
    }
    &.rms-am #actor_navigation .navigation-product .info-vendor .vendor-subline .link-action {
        background-image: var(--asset-logo-rms-wordmark-AM);
    }
    &.rms-km #actor_navigation .navigation-product .info-vendor .vendor-subline .link-action {
        background-image: var(--asset-logo-rms-wordmark-KM);
    }
    &.rms-pm #actor_navigation .navigation-product .info-vendor .vendor-subline .link-action {
        background-image: var(--asset-logo-rms-wordmark-PM);
    }
}


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

/* Phone viewports */
@media only screen and (max-width: 680px) {
    #actor_navigation .navigation-section .flyout-host {
        width: calc(var(--site-width) - 2 * var(--site-gutter-mobile));
    }
}


/* --- Notification flyout */
#actor_navigation .navigation-notification .flyout-host {
    /* Flyout container */
    left: auto;
    right: 0;
    transform: none;
    width: var(--flyout-width-medium);
    
    /* Subheads */
    h3 {
        color: var(--subhead-textcolor);
        margin-top: 30px;
        text-transform: var(--subhead-transform);
        padding: 0 15px 0 15px;
        font: var(--subhead-textset);
        letter-spacing: var(--spacing-subhead);
    }
    
    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: var(--line-separator-inverse-thick);
    }
    
    .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;
    }
}

/* Edge case: flyout can be present on login screen if Admin app wants a password change */
.stage-login #actor_navigation .navigation-notification .flyout-host {
    right: auto;
    left: 0;
}

/* Phone viewports */
@media only screen and (max-width: 680px) {
    #actor_navigation .navigation-notification .flyout-host {
        width: calc(var(--site-width) - 2 * var(--site-gutter-mobile));
        right: var(--site-gutter-mobile);
        
        /* Message lists + containers */
        .substance-message {
            border-top: none;
        }
    }
}


/* --- System messages flyout */
#actor_navigation .navigation-message .flyout-host {
    /* Flyout container */
    left: auto;
    right: 0;
    transform: none;
    width: var(--flyout-width-medium);
    
    /* Message lists + containers */
    .substance-message {
        padding: 15px 15px 15px 15px;
        border-bottom: var(--line-separator-inverse-thick);
    }
    
    .substance-message:last-child {
        border-bottom: none;
    }
}

/* Edge case: flyout can be present on login screen if Admin app wants a password change */
.stage-login #actor_navigation .navigation-message .flyout-host {
    right: auto;
    left: 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);
    }
    
    /* Mode with displayed search results */
    &.host-size-mega .menu-section:has(.primary-action.action-search) {
        width: var(--flyout-width-standard);
    }
    
    &.host-size-mega .menu-section:has(.substance-table) {
        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;
    }
}

/* Edge case: flyout can be present on login screen if Admin app wants a password change */
.stage-login #actor_navigation .navigation-user .flyout-host {
    right: auto;
    left: 0;
}


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

/* --- Header containers */
#actor_header {
    display: flex;
    align-items: center;
    
    /* Page headline */
   .header-page {
        margin-right: 20px;
    }
    
    /* ListView: record counter */
   .header-counter {
    }
    
    /* ListView/ObjectView: list actions or issue date */
   .header-actions, 
   .header-attributes {
        margin-left: auto;
    }
}

/* Small desktop + tablet viewports */
@media only screen and (max-width: 1340px) {
    #actor_header {
        padding-left: var(--site-gutter-mobile);
        padding-right: var(--site-gutter-mobile);
    }
    
    .stage-login #actor_header .header-page {
        margin-right: 0;
    }
}

/* Phone viewports */
@media only screen and (max-width: 680px) {
    #actor_header {
        justify-content: space-around;
    }
}


/* --- Client logo */
#actor_header .header-client {
    height: 100%;
    width: auto;
    margin: 0 var(--header-logo-gutter) 0 0;
    padding: 10px 0 10px 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: left;
    flex-shrink: 0;
    
    /* Actual logo file (customized by client_primary.css) */
    img {
        display: inline-block;
        height: 100%;
        -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;
    }
}

/* Different margins for ObjectView page variants */
.stage-objectview {
    #actor_header .header-client {
        width: calc(var(--sidebar-width) + var(--sidebar-gutter) - 8px);
        margin-right: 0;
    }
    
    &:has(#actor_list.expression-collapsed) #actor_header .header-client {
        width: auto;
        margin-right: var(--header-logo-gutter);
    }
    
    &:not(:has(#actor_list)) #actor_header .header-client {
        width: calc(var(--sidebar-width-missing) + var(--sidebar-gutter) - 8px);
        margin-right: 0;
    }
}

/* Small desktop + tablet viewports */
@media only screen and (max-width: 1340px) {
    #actor_header .header-client {
        --header-logo-gutter: 24px;
    }
}

/* Phone viewports */
@media only screen and (max-width: 680px) {
    .stage-login #actor_header .header-client {
        --header-logo-gutter: 16px;
    }
    
    /* Hide client logo (displayed in #actor_navigation instead) */
    .stage:not(.stage-login) #actor_header .header-client {
        display: none;
    }
    
    .stage:not(.stage-login) {
        --main-header-height: var(--main-header-height-nologo);
    }
}


/* --- Page headlines */
#actor_header .header-page {
    color: var(--masthead-textcolor);
    flex-shrink: 1;
    --max-page-descript-width: calc(0.72 * (var(--site-width) - var(--sidebar-width)) - 78px); /* Middle column of #actor_incident */
    
    /* Full width if the header has no neighboring attributes at all */
    &:has(+ .header-attributes:empty), 
    &:last-child {
        --max-page-descript-width: calc(1 * (var(--site-width) - var(--sidebar-width)) - 78px);
    }

    /* Page title */
    .page-topic {
        font: var(--masthead-textset);
        letter-spacing: var(--spacing-masthead);
        white-space: nowrap;
        max-width: var(--max-page-descript-width);
        overflow-x: hidden;
        text-overflow: ellipsis;
    
        em {
            font-weight: var(--masthead-textset-emphasis-weight);
        }
    }

    /* 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-x: hidden;
        text-overflow: ellipsis;
    
        .substance-entity.entity-validation:first-child {
            vertical-align: bottom;
            margin-right: 4px;
        }
        
        /* Embedded ID objects */
        .substance-id {
            font-size: inherit;
            position: static;
        }
        
        .substance-id .id-prefix {
            font: var(--textset-plus-m);
        }
        
        .substance-id .id-suffix:is(.suffix-point, .suffix-opinion) {
            color: var(--textcolor-standard);
            --backcolor-id-suffix: var(--backcolor-id-suffix-inverse);
        }
        
        /* Embedded scroll links */
        .link-action {
            color: inherit;
            text-decoration: underline;
        }
        
        /* Embedded crossjump links */
        .link-action > .substance-id, 
        .link-action > .substance-id .id-prefix {
            text-decoration: underline;
        }
        
        /* EXPERIMENTAL: Embedded flyout controllers */
        &:has(.substance-flyout) {
            overflow: visible;
        }
        
        .substance-flyout {
            display: inline-block;
        }

        /* Interaction states */
        @media (hover: hover) {
            .substance-entity.entity-validation:first-child:hover {
                cursor: help;
            }
            
            .link-action:hover {
                color: var(--link-text-color-hover);
            }
            
            /* Scroll links to customer block */
            .link-action[href^="#"]:hover {
                cursor: s-resize;
            }
        }
    
        &:has(.link-action:focus-visible) {
            overflow: visible;
        }
        
        .link-action:focus-visible {
            outline: var(--focus-outline-accent);
        }
    }
}

/* Small desktop + tablet viewports */
@media only screen and (max-width: 1340px) {
    #actor_header .header-page {
        --max-page-descript-width: none;
    }
}

/* Phone viewports */
@media only screen and (max-width: 680px) {
    #actor_header .header-page {
        overflow: hidden; /* truncates long headlines */
        margin-right: 0;
        
        .page-topic {
            font: var(--textset-xl);
            max-width: 100%;
        }
        
        .page-description {
            font: var(--textset-m);
            max-width: 100%;
            margin-top: 0;
        }
    }
}


/* --- 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);
    }
}

/* Phone viewports */
@media only screen and (max-width: 680px) {
    #actor_header .header-counter {
        display: none;
    }
}


/* --- 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: var(--font-weight-bold);
    }
    
    /* 2-line attributes */
    > :nth-child(2) {
        font: var(--textset-plus-m);
        margin-top: 8px;
    }
}


/* --- 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;
}

/* Inner flyouts (from value auto-suggest) need to be able to overlap */
#actor_header .flyout-host:has(.field-entry.substance-flyout.flyout-compact) {
    overflow: visible;
}


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

#actor_viewer {
    background: var(--backcolor-overlay);
    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-secondary-height);
    }
    
    .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-secondary-height));
        right: 0;
    }
}


/* !-------------------------------------------- */
/* !ACTOR: Generic modal dialog (Overlay window) */
/* !-------------------------------------------- */

/* --- Vertical container layout */
#actor_modal {
    display: flex;
    flex-direction: column;
    background: var(--backcolor-overlay);
    
    .modal-head {
        flex-grow: 0;
        flex-shrink: 0;
    }
    
    .modal-message {
        flex-grow: 1;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }
    
    .modal-action {
        flex-grow: 0;
        flex-shrink: 0;
    }
}


/* --- Headline */
#actor_modal .modal-head {
    background: var(--gradient-nav-header);
    padding: 20px;
    
    h2 {
        font: var(--masthead-textset);
        letter-spacing: var(--spacing-masthead);
        color: var(--masthead-textcolor);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
}


/* --- Scrollable message */
#actor_modal .modal-message {
    padding: 20px;
    
    .substance-message {
        background: none;
        padding: 0;
    }
}


/* --- Exit options */
#actor_modal .modal-action {
    padding: 20px;
    background: var(--backcolor-footer);
    -moz-column-gap: 0;
         column-gap: 0;
    
    /* Cancel button */
    .toolchain-link.action-cancel {
        width: 30%;
    }
    
    /* 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%;
    }
}


/* -------------------------------------------- */
/* !ACTOR: Overlay with waiting animation */ 
/* -------------------------------------------- */

#actor_latency {
    background: var(--backcolor-overlay);
}

/* Phone viewports */
@media only screen and (max-width: 680px) {
    #actor_latency {
        background: var(--backcolor-overlay-transparent);
    }
}

#actor_latency .overlay-lift {
    padding: 32px;
}

#actor_latency .substance-progress {
    width: 100%;
}


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

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

#actor_creator {
    /* --- MASTER CONTAINER: initialization */
    background: var(--backcolor-overlay);
    padding: 0 var(--creator-overlay-padding) 0 var(--creator-overlay-padding);
    container-name: route-container layout-container;
    container-type: inline-size;
    
    /* Container dimensions */
    --creator-overlay-padding: 20px;


    /* 🔗 --- BUTTONS & LINKS */
    --block-expander-textset: var(--textset-minus-l);
    --block-expander-textset-mobile: var(--textset-l);
    
    --block-expander-summary-textset: var(--font-weight-light) var(--font-size-minus-l) var(--font-base);
    --block-expander-summary-textset-mobile: var(--textset-l);
    --block-expander-summary-textset-mobile-s: var(--font-weight-regular) var(--font-size-m) var(--font-base);
    
    --block-expander-text-color: var(--expand-text-color);
    --block-expander-text-color-active: var(--expand-text-color-active);
    --block-expander-text-color-hover: var(--expand-text-color-hover);
    --block-expander-text-color-active-hover: var(--expand-text-color-active-hover);


    /* 📐 --- FORM BLOCKS */
    /* Block dimensions */
    --creator-formblock-gutter: 20px;
    --block-inset: 20px;
    --block-inset-mobile: 0;
    --block-inset-message: 0;
    
    --block-inset-footer: var(--block-inset);
    
    --block-radius: 0;
    --block-active-radius: 0;
    
    /* Block headlines */
    --creator-formblock-head-inset-horizontal: 0;
    --creator-formblock-head-inset-horizontal-mobile: 0;
    --creator-formblock-head-inset-vertical: 10px;
    --validation-marker-size: 20px;
    --validation-summary-empty: "…";
    --validation-separator: " – ";
    
    /* Block colors */
    --block-controller-back: transparent;
    --block-controller-back-active: transparent;
    --block-controller-internal-back: var(--backcolor-neutral-white);
    
    --block-content-back: transparent;
    --block-content-active-back: transparent;

    
    /* 📐 --- FORMS */
    /* Fieldlist dimensions */
    --fieldlist-row-gutter: 20px;
    --fieldlist-row-gutter-extended: 25px;
    --fieldlist-column-gutter: 30px;
    --fieldlist-segment-inset: 10px;
    
    --fieldlist-line-separator: var(--line-standard);

    
    /* 📐 --- SUMMARY */
    --summary-point-backcolor: var(--backcolor-standard);
    
    /* Summary dimensions & colors */
    --summary-row-gutter: 10px;
    --summary-keycol-width: 30%;
    --summary-valuecol-width: 70%;

    --summary-key-textset: var(--textset-m);
    --summary-key-textset-mobile: var(--textset-plus-m);
    --summary-key-textcolor: var(--textcolor-accent);
    
    --summary-value-textset: var(--font-weight-medium) var(--font-size-m) var(--font-base);
    --summary-value-textset-mobile: var(--textset-l);
    --summary-value-textcolor: var(--textcolor-standard);
    

    /* 📐 --- RECEIPT */
    --receipt-inset: 0px;
    
    --receipt-textcolor: var(--textcolor-standard);
    --receipt-head-textset: var(--textset-xl);
    --receipt-body-textset: var(--textset-m);


    /* --- Scrolling offset for sticky header (neutral initalization for client skins) */
    /* ⚠️ Value has to be negative to become effective. Variable value is fetched by React code to adjust auto-scrolling */
    --floating-header-height: 0px;
}


/* --- Internal Creators incl. Solo PWA Creator */
/* Phone viewports */
@media only screen and (max-width: 680px) {
    #actor_creator.expression-internal {
        /* --- MASTER CONTAINER: initialization */
        --creator-overlay-padding: var(--site-gutter-mobile);
        
        
        /* 🔗 --- BUTTONS & LINKS */
        --button-secondary-width-minimum: 40px;


        /* 📐 --- FORM BLOCKS */
        /* Block dimensions */
        --creator-formblock-gutter: 10px;
        --block-inset: 10px;
    }
}


/* !-------------------------------------------- */
/* !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 {
    background: var(--block-content-back);
    border-radius: var(--block-radius);
    
    &.item-active {
        background: var(--block-content-active-back);
        border-radius: var(--block-active-radius);
        margin-bottom: var(--creator-formblock-gutter);
    }
}

@container layout-container (width < 680px) {
    #actor_creator .form-block {
        margin-bottom: var(--creator-formblock-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(--creator-formblock-gutter) 0 var(--creator-formblock-gutter) 0;
        display: flex;
        -moz-column-gap: var(--fieldlist-row-gutter);
             column-gap: var(--fieldlist-row-gutter);
    }
}


/* !-------------------------------------------- */
/* !Header (only used for internal Creators & Solo PWA Creator) */
/* !-------------------------------------------- */

/* --- Header container */
#actor_creator {
    .creator-head {
        position: relative;
        z-index: 1;
        margin: 0 calc(-1 * var(--creator-overlay-padding)) var(--creator-formblock-gutter) calc(-1 * var(--creator-overlay-padding));
        width: calc(100% + (2 * var(--creator-overlay-padding)));
        padding: var(--block-inset);
        border-bottom: var(--line-standard-thick);
    }
    
    /* Internal Creator & Solo PWA Creator: optional tools */
    &.expression-internal .creator-head {
        padding-left: calc(var(--block-inset) + 48px);
        background-color: var(--backcolor-header);
        background-image: var(--gradient-nav-header);
        border-bottom: none;
        display: flex;
        -moz-column-gap: 20px;
             column-gap: 20px;
        align-items: center;
    }
    
    /* Internal Creator & Solo PWA Creator: entity icons */
    &.expression-internal .creator-head:before {
        content: "";
        position: absolute;
        display: block;
        left: var(--creator-overlay-padding);
        top: 50%;
        margin-top: -20px;
        width: 40px;
        height: 40px;
        background: transparent center var(--asset-complaint-operations) no-repeat;
        background-size: contain;
    }
    
    &.expression-internal.expression-solo .creator-head:before {
        background-image: var(--asset-incident-mixed);
    }
}

/* Phone viewports */
@container layout-container (width < 680px) {
    /* Solo PWA Creator */
    #actor_creator.expression-internal.expression-solo .creator-head {
        padding-left: calc(var(--creator-overlay-padding) + 36px);
        padding-right: var(--creator-overlay-padding);
    }
    
    #actor_creator.expression-internal.expression-solo .creator-head:before {
        width: 28px;
        height: 28px;
        margin-top: -14px;
    }
}


/* --- Headline & interactive elements */
#actor_creator .creator-head {
    h2 {
        font: var(--masthead-textset);
        letter-spacing: var(--spacing-masthead);
        color: var(--masthead-textcolor);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        flex-grow: 1;
    }
    
    /* DEPRECATED: Solo PWA Creator: protector dialog */
    .substance-protector.protector-type-floating .protector-flyout {
        left: auto;
        right: var(--creator-overlay-padding);
        transform: none;
        top: 0;
        bottom: auto;
    }
    
    .substance-protector.protector-type-floating.item-active .protector-flyout {
        width: var(--flyout-width-minimum);
    }
    
    /* Solo PWA Creator: vehicle properties flyout */
    .substance-flyout .flyout-host {
        right: 0;
        left: auto;
        transform: none;
        width: var(--flyout-width-standard);
        max-height: calc(100dvh - (2 * var(--overlay-viewport-distance)) - 73px); /* rough header height as correction factor */
        overflow: auto;
    }
    
    &:has(.primary-action.action-cancel) .substance-flyout .flyout-host {
        right: calc(-1 * (var(--button-secondary-height) + 20px));
    }
}

/* Phone viewports */
@container layout-container (width < 680px) {
    /* Solo PWA Creator */
    #actor_creator.expression-solo .creator-head {
        h2 {
            font: var(--textset-l);
        }
        
        /* DEPRECATED: only used for an older prototype */
        .substance-protector.protector-type-floating.item-active .protector-flyout .primary-action {
            width: 100%;
        }
    }
}

@media only screen and (max-width: 680px) {
    /* Solo PWA Creator */
    #actor_creator.expression-solo .creator-head .substance-flyout .flyout-host {
        right: 0;
        width: calc(var(--site-width) - 2 * var(--site-gutter-mobile));
        max-height: calc(100dvh - (2 * var(--overlay-viewport-distance)) - 50px); /* rough header height as correction factor */
    }
}


/* !-------------------------------------------- */
/* !Block controllers */
/* !-------------------------------------------- */
    
/* --- Expander/Collapser component */
#actor_creator .form-block .block-controller {
    position: relative;
    width: 100%;
    padding: var(--creator-formblock-head-inset-vertical) var(--creator-formblock-head-inset-horizontal) var(--creator-formblock-head-inset-vertical) var(--creator-formblock-head-inset-horizontal);
    background: var(--block-controller-back);
    margin-bottom: calc(var(--fieldlist-row-gutter) / 2);
    border-bottom: var(--line-standard-thick);
    
    /* Modify color scheme of .expand-action if needed */
    --expand-text-color: var(--block-expander-text-color);
    --expand-text-color-active: var(--block-expander-text-color-active);
    --expand-text-color-hover: var(--block-expander-text-color-hover);
    --expand-text-color-active-hover: var(--block-expander-text-color-active-hover);
}

#actor_creator .form-block.item-active .block-controller {
    background: var(--block-controller-back-active);
}

/* Internal Creators */
#actor_creator.expression-internal .form-block {
    .block-controller {
        display: flex;
        -moz-column-gap: 15px;
             column-gap: 15px;
        background: var(--block-controller-internal-back);
        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)));
    }
    
    /* Top-aligned arrow positioning for multi-line block headlines incl. summary */
    .block-controller .expand-action:before {
        top: 2px;
        margin-top: 0;
    }
    
    &:not(.block-validated) .block-controller:has(.primary-action.action-delete) .expand-action:before {
        top: 5px;
    }
}

/* Smaller viewports */
@container layout-container (width < 800px) {
    /* All Creators */
    #actor_creator .form-block .block-controller .expand-action:before {
        top: 3px;
        margin-top: 0;
    }
    
    /* Internal Creators */
    #actor_creator.expression-internal .form-block:not(.block-validated):has(.block-controller .primary-action.action-delete) .block-controller .expand-action:before {
        top: 7px;
    }
}

@container layout-container (width < 680px) {
    /* All Creators */
    #actor_creator .form-block .block-controller {
        padding-left: var(--creator-formblock-head-inset-horizontal-mobile);
        padding-right: var(--creator-formblock-head-inset-horizontal-mobile);
    }
}

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

    .substance-id {
        font-size: inherit;
        font-weight: inherit;
    }
    
    .substance-id .id-prefix {
        font: var(--block-expander-textset);
    }
    
    .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 {
        --block-expander-textset: var(--block-expander-textset-mobile);
    }
}


/* --- 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(--expand-text-color);
        cursor: not-allowed;
    }
}


/* --- Summary of submitted form block content */
#actor_creator .form-block {
    .block-controller .controller-summary {
        font: var(--block-expander-summary-textset);
        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: "";
        }
    }
    
    /* Phone viewports */
    @container layout-container (width < 680px) {
        .block-controller .controller-summary {
            --block-expander-summary-textset: var(--block-expander-summary-textset-mobile);
        }
    }
}

/* Internal Creators */
#actor_creator.expression-internal .form-block .block-controller {
    /* always show summaries at full length */
    .controller-summary {
        display: block;
        white-space: normal;
        margin-top: 3px;
        margin-left: 0;
        color: inherit;
    }
    
    .controller-summary:before, 
    .controller-summary:after {
        content: "";
    }
    
    /* Entity icons */
    .controller-summary.substance-entity {
        --icon-entity-size: var(--icon-entity-size-small);
        --icon-entity-size-type-margin: var(--icon-entity-size-small-margin);
        --icon-entity-type-margin-top: var(--icon-entity-size-small-margin-top);
    }
    
    /* Phone viewports */
    @container layout-container (width < 680px) {
        .controller-summary {
            --block-expander-summary-textset: var(--block-expander-summary-textset-mobile-s);
        }
        
        /* Entity icons */
        .controller-summary.substance-entity {
            --icon-entity-type-margin-top: 0;
        }
    }
}


/* --- 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(--creator-formblock-head-inset-vertical);
            margin-top: 0;
        }
    }
    
    .block-controller:after, 
    &.validated-ok .block-controller:after {
        display: block;
        background-image: var(--asset-validation-ok);
    }
    
    &.validated-warn .block-controller:after {
        display: block;
        background-image: var(--asset-validation-warn);
    }
    
    &.validated-crisis .block-controller:after {
        display: block;
        background-image: var(--asset-validation-crisis);
    }
}

/* Internal Creators always show summaries across multiple lines */
#actor_creator.expression-internal .form-block.block-validated .block-controller:after {
    top: var(--creator-formblock-head-inset-vertical);
    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;
}

/* Phone viewports */
@container layout-container (width < 680px) {
    #actor_creator:not(.expression-internal) .form-block .block-controller ~ * {
        margin-left: var(--block-inset-mobile);
        margin-right: var(--block-inset-mobile);
    }
}


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

#actor_creator .form-block .primary-action + .substance-message, 
#actor_creator .form-block .substance-message:has(+ .primary-action) {
    margin-top: var(--fieldlist-row-gutter);
    margin-bottom: 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: special messages */
#actor_creator.expression-internal .form-block .substance-message.message-level-info {
    background: none;
    border-bottom: var(--line-standard);
}

#actor_creator.expression-internal .form-block .block-controller + .substance-message.message-level-warn {
    margin-top: calc((-1 * var(--fieldlist-row-gutter)) + (2 * var(--line-signature-width)));
}


/* --- 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(--fieldlist-line-separator);
    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;
        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);
    }
    
    /* 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;
    }
}


/* --- Inner accordions */
#actor_creator .form-block .substance-accordion {
    --expand-text-color: var(--textcolor-standard);
}

#actor_creator .form-block .substance-accordion .accordion-block.item-active:last-child {
    border-bottom: none;
}

#actor_creator .form-block .substance-accordion .block-head {
    padding-left: 0;
    padding-right: 0;
}

#actor_creator .form-block .substance-accordion .block-content {
    padding-left: 20px;
}

#actor_creator .form-block .substance-accordion .block-content 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);
}

#actor_creator .form-block .substance-accordion .block-content ul + ul {
    margin-top: calc(2 * var(--creator-formblock-gutter));
}


/* !-------------------------------------------- */
/* !Internal only: modified route table */
/* !-------------------------------------------- */

#actor_creator.expression-internal .substance-route .stop-helper .primary-action {
    margin-right: 10px;
    width: calc(100% - 10px);
}


/* !-------------------------------------------- */
/* !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(--subhead-textcolor);
        margin: 0 0 var(--summary-row-gutter) 0;
        text-transform: var(--subhead-transform);
        font: var(--subhead-textset);
        letter-spacing: var(--spacing-subhead);
    }
    
    .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(--summary-point-backcolor);
        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 {
        font: var(--summary-key-textset);
        color: var(--summary-key-textcolor);
    }
    
    .property-item .property-value {
        font: var(--summary-value-textset);
        color: var(--summary-value-textcolor);
    }
    
    /* 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: inherit;
    }
    
    .property-value .substance-richtext {
        max-width: 100%;
        overflow-wrap: anywhere;
    }
    
    @container layout-container (width < 680px) {
        .property-title {
            font: var(--summary-key-textset-mobile);
        }
        
        .property-value {
            font: var(--summary-value-textset-mobile);
        }
    }
}


/* --- 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;
}

/* Phone viewports */
@container layout-container (width < 680px) {
    /* Solo PWA Creator */
    #actor_creator.expression-solo .form-block .block-property .property-item .property-value:has(.substance-file) {
        grid-template-columns: 1fr 1fr;
    }
}


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

/* --- Basic richtext composition */
#actor_creator .creator-form .form-receipt {
    margin: 0 var(--receipt-inset) 0 var(--receipt-inset);
    color: var(--receipt-textcolor);
    
    h2 {
        font: var(--receipt-head-textset);
        margin-bottom: 0.7em;
    }
    
    p {
        font: var(--receipt-body-textset);
        margin-bottom: 0.7em;
    }
    
    p:last-child {
        margin-bottom: 20px;
    }
}


/* --- Suppressed interaction state */
/* We set programmatic :focus on this, only to encourage screenreaders to narrate it */
#actor_creator .creator-form .form-receipt:focus, 
#actor_creator .creator-form .form-receipt:focus-visible {
    outline: none !important;
}


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

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

/* Solo PWA Creator: accommodate bottom screen curvature */
#actor_creator.expression-solo .creator-action {
    padding-left: max(var(--block-inset), env(safe-area-inset-left));
    padding-right: max(var(--block-inset), env(safe-area-inset-right));
    padding-bottom: max(var(--block-inset), env(safe-area-inset-bottom));
}


/* --- 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%;
    }
    
    /* Blocked submit button */
    .substance-message {
        text-align: left;
        background: var(--backcolor-neutral-white);
    }
}

/* Small viewports */
@container layout-container (width < 800px) {
    #actor_creator .creator-action {
        display: block;
    }
    
    /* Solo PWA Creator: keep buttons horizontally */
    #actor_creator.expression-solo .creator-action {
        display: flex;
        -moz-column-gap: 32px;
             column-gap: 32px;
        
        &:has(.substance-protector.item-active) {
            -moz-column-gap: 0;
                 column-gap: 0;
        }
    }
    
    
    /* --- Cancel button */
    #actor_creator:not(.expression-solo) .creator-action .toolchain-link.action-cancel {
        margin-bottom: 20px;
    
        /* Variant: protected cancel button (only used for internal Creators) */
        .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;
            }
        }
    }
    
    /* Solo PWA Creator: full-width protector dialog */
    #actor_creator.expression-solo .creator-action .toolchain-link.action-cancel {
        width: auto;
        
        .substance-protector {
            width: 100%;
            
            &.item-active .protector-flyout {
                padding: 20px 10px 20px 10px;
                bottom: calc(100% + var(--block-inset) + 16px);
                row-gap: 10px;
                width: 50dvw; /* TODO: maybe optimize this to dynamic overlay width */
            }
            
            &.item-active .protector-failsafe, 
            &.item-active .protector-risky {
                width: 100%;
            }
        }
    }
    
    
    /* --- 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%;
    }
    
    /* Solo PWA Creator: Asymmetric layout */
    #actor_creator.expression-solo:has(.substance-protector) .creator-action .toolchain-link.action-primary {
        width: auto;
        flex-grow: 1;
    }
}

/* Phone viewports */
@media only screen and (max-width: 680px) {
    /* Solo PWA Creator: full-width protector dialog */
    #actor_creator.expression-solo .creator-action .toolchain-link.action-cancel {
        .substance-protector {
            &.item-active .protector-flyout {
                width: calc(var(--site-width) - max(var(--block-inset), env(safe-area-inset-right)) - var(--creator-overlay-padding));
            }
        }
    }
}


/* !-------------------------------------------- */
/* !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 var(--asset-validation-crisis) no-repeat;
        background-size: 20px;
        z-index: 10;
        pointer-events: none;
    }
    
    &.environment-qa .creator-action:before {
        background-image: var(--asset-validation-ok);
        background-color: var(--color-state-ok-medium);
    }
    &.environment-rtp .creator-action:before {
        background-image: var(--asset-validation-crisis);
        background-color: var(--color-state-crisis-light);
    }
    &.environment-mirror .creator-action:before {
        background-image: var(--asset-validation-warn);
        background-color: var(--color-state-warn-medium);
    }


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

/* -------------------------------------------- */
/* Codebox Transity */
/* Version: 407 */
/* -------------------------------------------- */
/* 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;
    }
}

/* Small desktop + tablet viewports */
@media only screen and (max-width: 1340px) {
    #actor_authorization {
        display: block;
        padding-left: var(--site-gutter-mobile);
        padding-right: var(--site-gutter-mobile);
        padding-top: 30px;
    }
    
    .authorization-form {
        margin-bottom: 0;
    }
    
    .authorization-product {
        margin-bottom: 30px;
    }
    
    .authorization-prototype {
        margin-bottom: 30px;
    }
}

/* Phone viewports */
@media only screen and (max-width: 680px) {
    #actor_authorization {
        padding-top: var(--site-gutter-mobile);
    }
}


/* --- 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: var(--font-weight-medium);
            color: var(--textcolor-inverse);
        }

        .field-container input {
            border-bottom-width: 2px;
            will-change: auto;
        }
        
        .field-container input:focus {
            will-change: tranform; /* calms down repainting due to blinking caret cursor */
        }
        
        /* 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 needs client-specific modification in client_primary.css */
        }
    }
}

/* Small desktop + tablet viewports */
@media only screen and (max-width: 1340px) {
    #actor_authorization .authorization-form {
        border-radius: var(--radius-panel) var(--radius-panel) 0 0;
        padding: 15px;
    }
}

/* Phone viewports */
@media only screen and (max-width: 680px) {
    #actor_authorization .authorization-form {
        .field-entry {
            &:not(:last-child) {
                margin-bottom: var(--field-entry-margin);
            }
            
            /* Login button */
            .primary-action.action-level-solid {
                width: 100%;
            }
        }
    }
}


/* --- 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(--product-ad-textset);
    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 var(--asset-logo-cbx-dark) center top no-repeat;
    background-size: 170px;
    padding-top: 40px;
    margin-bottom: 20px;
    display: block;
    width: 100%;
    height: 100%;
    font-weight: var(--product-ad-textset-emphasis-weight);
    transition: var(--transition-color);
    
    /* Interaction states */
    @media (hover: hover) {
        &:hover {
            color: var(--textcolor-accent);
            transition: var(--transition-color);
        }
    }
    
    &:focus-visible {
        outline-offset: 8px;
    }
}

.stage.brand-rms #actor_authorization .authorization-product .product-vendor {
    .link-action {
        background: transparent var(--asset-logo-rms) 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: var(--product-ad-textset-sku-weight);
        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: var(--asset-logo-rms-AM);
    }
    .item-product-fm {
        background-image: var(--asset-logo-rms-FM);
    }
    .item-product-km {
        background-image: var(--asset-logo-rms-KM);
    }
    .item-product-pm {
        background-image: var(--asset-logo-rms-PM);
    }
    .item-product-vt {
        background-image: var(--asset-logo-rms-VT);
    }
    .item-product-kt {
        background-image: var(--asset-logo-rms-KT);
    }
}

/* Small desktop + tablet viewports */
@media only screen and (max-width: 1340px) {
    #actor_authorization .authorization-product {
        border-radius: 0 0 var(--radius-panel) var(--radius-panel);
        padding: 15px;
    }
}

/* Phone viewports */
@media only screen and (max-width: 680px) {
    .stage.brand-rms #actor_authorization .authorization-product {
        display: block;
        
        .product-list.list-rms {
            margin-top: 20px;
        }
    }
}


/* --- PROTOTYPE ONLY: link lists to various prototypes */
#actor_authorization .authorization-prototype {
    grid-column: 2 / 4;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 16px;
    -moz-column-gap: 16px;
         column-gap: 16px;
    grid-row-gap: 16px;
    row-gap: 16px;

    .prototype-group {
        font: var(--textset-plus-s);
        color: var(--textcolor-standard);
        border-radius: var(--radius-panel);
        background: var(--backcolor-login-prototype);
        padding: 15px;
    }
    
    .prototype-group.group-apps, 
    .prototype-group.group-complaint {
        grid-row: 1 / 3;
    }
    
    .prototype-group.group-guarantee {
        grid-row: 1;
    }
    
    .prototype-group.group-special {
        grid-row: 2;
    }

    /* Prototype product links */
    h2 {
        font: var(--subhead-textset);
        color: var(--subhead-textcolor);
        letter-spacing: var(--spacing-subhead);
        text-transform: var(--subhead-transform);
        margin-bottom: 15px;
    }
    
    .prototype-list {
        display: flex;
        flex-direction: column;
        row-gap: 5px;
    }
    
    .prototype-list + .prototype-list {
        margin-top: 30px;
    }
}

/* Small desktop + tablet viewports */
@media only screen and (max-width: 1340px) {
    #actor_authorization .authorization-prototype {
        display: block;
        
        .prototype-group {
            margin-top: 10px;
            display: flex;
            flex-wrap: wrap;
            -moz-column-gap: 30px;
                 column-gap: 30px;
        }
        
        h2 {
            width: 100%;
        }
        
        .prototype-list + .prototype-list {
            margin-top: 0;
        }

    }
}

/* Phone viewports */
@media only screen and (max-width: 680px) {
    #actor_authorization .authorization-prototype {
        .prototype-group {
            display: block;
        }
        
        .prototype-list .primary-action {
            width: 100%;
        }
        
        .prototype-list + .prototype-list {
            margin-top: 20px;
        }
    }
}

/* 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;
    
    &:focus-visible {
        outline: var(--focus-outline-inverse);
    }
}

/* Small desktop + tablet viewports */
@media only screen and (max-width: 1340px) {
    #actor_authorization .authorization-protohide {
        display: table;
    }
}

/* Phone viewports */
@media only screen and (max-width: 680px) {
    #actor_authorization .authorization-protohide {
        width: 100%;
    }
}

/* Hide Prototype information in all Primary skins */
.stage.skin #actor_authorization .authorization-prototype, 
.stage.skin #actor_authorization .authorization-protohide {
    display: none;
}


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

#actor_error {
    padding-left: calc(var(--sidebar-width-minimum) - 18px);
}

#actor_error :is(.substance-communication, .substance-message) {
    width: var(--overlay-width-minimum);
    margin: 24px 0 0 0;
}

#actor_error .primary-action {
    margin-top: 32px;
}


/* !-------------------------------------------- */
/* !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: var(--line-separator-inverse);
    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: var(--line-separator-inverse);
}

/* 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: var(--font-weight-regular);
        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: var(--font-weight-light);
        font-size: 35px; /* edge case */
        transition: var(--transition-color);
    }
    
    &.gadget-type-counter.counter-zero mark {
        color: var(--textcolor-inverse);
        font-weight: var(--font-weight-medium);
    }
    
    .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 var(--asset-gadget-direction) center no-repeat;
    }
    
    .gadget-amount.amount-rising mark:after {
        transform: rotateZ(-180deg);
    }
    
    /* Interaction states */
    @media (hover: hover) {
        .link-action:hover .gadget-amount mark {
            color: inherit;
            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-menu-hover);
            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;
        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(--icon-action-size) / 2));
        transition: var(--transition-universal);
    }
    
    /* Collapser button */
    .listcontrol-view .expand-action {
        position: absolute;
        bottom: 8px;
        left: 0;
    }
}


/* !-------------------------------------------- */
/* !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;
}

/* Phone viewports */
@media only screen and (max-width: 680px) {
    /* Tight vertical packing */
    #actor_list .substance-table:first-child {
        margin-top: calc(-1 * var(--main-ensemble-gutter));
    }

    /* For the time being, all small tables turn headless automatically (instead of using .table-headless) */
    #actor_list .substance-table thead:not(:has(th:nth-child(4))) {
        clip: rect(1px, 1px, 1px, 1px);
        clip-path: inset(50%);
        height: 1px;
        width: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
    }
    
    /* Tighter vertical padding */
    #actor_list .substance-table td {
        padding-top: var(--table-body-padding-vertical-s);
        padding-bottom: var(--table-body-padding-vertical-s);
    }
}


/* --- 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. */


/* --- Animated list entry manipulation */
#actor_list .substance-table tbody tr.entry-deleted {
    animation: entry-decay 0.7s ease forwards 0.2s;
}

@keyframes entry-decay {
    0% {
        opacity: 1;
        transform: scaleY(1);
    }
    100% {
        opacity: 0;
        transform: scaleY(0.1);
    }
}


/* --- 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%;
        
        .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;
    }
    
    .toolchain-link.action-reset {
        margin-right: auto;
        text-align: center;
        
        .substance-protector {
            display: inline-block;
            margin-bottom: 16px;
        }
        
        .substance-protector.item-active .protector-failsafe, 
        .substance-protector.item-active .protector-risky {
            width: 100%;
        }
    }
    
    /* Content of button containers */
    .action-load-more {
        text-align: center;
        
        .load-state {
            font-weight: var(--font-weight-bold);
            color: var(--textcolor-standard);
            margin-bottom: 15px;
        }
        
        .primary-action {
            margin: 0 auto 0 auto;
        }
    }
    
    /* Interaction state: scroll links */
    @media (hover: hover) {
        .action-up:hover {
            cursor: n-resize;
        }
    }
}

/* Phone viewports */
@media only screen and (max-width: 680px) {
    #actor_list .substance-table ~ .substance-toolchain {
        width: calc(var(--site-width) - 2 * var(--site-gutter-mobile));
        
        .toolchain-link.action-reset .substance-protector {
            width: 100%;
            
            .protector-risky {
                display: inline-block;
            }
        }
    }
}


/* --- Messages above or replacing the actual list */
#actor_list > .substance-message {
    width: 50%;
    max-width: var(--message-width-maximum);
    padding: 20px;
    margin: 0 auto 0 auto;
    
    &:first-child {
        margin-top: 20px;
    }
    
    /* Message replacing the table (no list entries found) */
    &:not(:has(+ *)), 
    &:not(:has(+ *)):first-child {
        margin-top: 30px;
        margin-bottom: 30px;
    }
    
    /* Messages with neighboring elements */
    + .substance-message {
        margin-top: 10px;
    }
    
    + .substance-table {
        margin-top: 20px;
    }

    /* Message content: More space for long error messages here */
    h4:not(:only-child) {
        margin-bottom: 0.6em;
    }
}

/* Phone viewports */
@media only screen and (max-width: 680px) {
    #actor_list > .substance-message {
        width: var(--site-width);
        max-width: none;
        padding: 10px;
        margin: 0 auto 0 auto;
        
        &:first-child {
            margin-top: calc(-1 * var(--main-ensemble-gutter));
        }
        
        /* Messages with neighboring elements */
        + .substance-message {
            margin-top: 0;
        }
    }
}


/* !-------------------------------------------- */
/* !ACTOR: Single-column Entity list */
/* !-------------------------------------------- */

/* --- EXPRESSION VARIANTS: Single-column list */
#actor_list:is(.expression-compact, .expression-collapsed) {
    --sidebar-backcolor: var(--backcolor-neutral-white);
    --sidebar-backcolor-active: var(--backcolor-menu-active);
    --sidebar-bordercolor: var(--linecolor-standard);
    --sidebar-weight-properties: var(--font-weight-regular);
    
    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 */
    .link-action {
        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 .link-action {
        padding-left: var(--cell-active-inset);
        transition: var(--transition-sidebar);
    }
    
    @media (hover: hover) {
        &:hover .link-action {
            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 */
    .link-action: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 .link-action:before {
        left: 0;
        transition: var(--transition-sidebar);
    }
    
    @media (hover: hover) {
        &:hover .link-action:before {
            left: 0;
            transition: var(--transition-sidebar);
        }
    }
    
    /* Inner link container: hover & highlight text */
    &.item-active .link-action, 
    &.item-active .link-action * {
        --backcolor-id-suffix: var(--backcolor-id-suffix-inverse);
        
        color: var(--link-text-color);
    }
    
    /* Interaction states */
    .link-action:focus-visible {
        outline-offset: -6px;
    }
}


/* --- EXPRESSION VARIANT: Compact list / entity wrapper */
#actor_list.expression-compact .cell .substance-entity {
    font-weight: var(--font-weight-regular);
    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: var(--font-weight-medium);
    }
    
    /* Additional properties */
    & ~ * {
        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 */
    .link-action {
        padding-top: 4px;
        padding-bottom: 3px;
        padding-right: 0;
        
        --line-active-width: var(--line-signature-width);
        --cell-active-inset: 10px;
    }
    
    /* Small entity icons without text */
    .substance-entity {
        --icon-entity-size: var(--icon-entity-size-small);
        --icon-entity-size-type-margin: var(--icon-entity-size-small-margin);
        --icon-entity-type-margin-top: var(--icon-entity-size-small-margin-top);
        
        text-indent: -1000em;
        width: 100%;
        
        /* Hide all text */
        ~ * {
            display: none;
        }
    }
    
    /* 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 styling for view controllers (similar to secondary action) */
#actor_objectcontrol.expression-menu .objectcontrol-tools {
    .toolchain-link.substance-flyout > .view-action, 
    .toolchain-link > .substance-flyout > .view-action {
        font: var(--button-secondary-textset);
        line-height: var(--button-secondary-height);
    }
    
    .toolchain-link > .substance-flyout > .view-action {
        --icon-flyout-padding: 20px;
        --icon-flyout-inset: 4px;

        border-radius: var(--radius-interaction);
        border: var(--button-secondary-view-border);
        padding: 0 var(--icon-flyout-padding) 0 var(--button-secondary-padding-horizontal);
        height: var(--button-secondary-height);
    }
    
    .toolchain-link > .substance-flyout > .view-action:after {
        right: var(--icon-flyout-inset);
        margin-top: calc((-1 * var(--icon-flyout-size) / 2) + 1px);
    }
    
    .toolchain-link > .substance-flyout > .view-action:hover {
        border: var(--button-secondary-border-hover);
    }
}


/* --- Central action flyouts */
#actor_objectcontrol .objectcontrol-tools .toolchain-link .flyout-host {
    --flyout-max-height: calc(100dvh - var(--main-top-padding) - var(--main-navigation-height) - var(--main-header-height) - var(--main-ensemble-gutter) - var(--objectcontrol-height) - 10px);
    max-height: var(--flyout-max-height);
    overflow: auto;
    
    /* Inner flyouts (from value auto-suggest) need to be able to overlap */
    &:has(.field-entry.substance-flyout.flyout-compact) {
        overflow: visible;
    }
}

/* 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;
}

/* Custom alignment: 2 rightmost flyout are aligned right + extend to leftwards */
#actor_objectcontrol .objectcontrol-tools:last-child:not(:only-child) {
    .toolchain-link:last-child .flyout-host, 
    .toolchain-link:nth-last-child(2) .flyout-host {
        right: 0;
        left: auto;
        transform: none;
    }
}

/* Custom alignment: 2 leftmost flyout(s) of 1st toolbar group */
#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, 
.stage-objectview:not(:has(#actor_list)) #actor_objectcontrol .objectcontrol-tools:first-child .toolchain-link:nth-child(2) > .substance-flyout > .flyout-host {
    left: 0;
    transform: none;
}

/* Custom alignment: Flyouts containing a solitary TinyMCE instance */
#actor_objectcontrol .objectcontrol-tools:first-child {
    .toolchain-link:nth-child(2) .flyout-host:has(.substance-richtext-editor):not(.host-sidebar), 
    .toolchain-link:nth-child(3) .flyout-host:has(.substance-richtext-editor):not(.host-sidebar) {
        left: calc(-1 * var(--sidebar-width));
        transform: none;
    }
}


/* --- Central action flyout: customer answer with text picker */
/* Custom alignment */
#actor_objectcontrol .objectcontrol-tools:first-child .toolchain-link .flyout-host:has(.substance-textpicker) {
    left: calc(-1 * var(--sidebar-width-effective));
    transform: none;
}

#actor_objectcontrol .objectcontrol-tools:first-child .toolchain-link:nth-child(n+4) .flyout-host:has(.substance-textpicker) {
    left: calc(-2 * var(--sidebar-width-effective));
}

/* Modern browsers: Dynamic overflow switching until max-height is reached */
@supports (animation-timeline: scroll()) {
    #actor_objectcontrol .objectcontrol-tools .toolchain-link .flyout-host:has(.substance-textpicker) {
        /* Install watcher for scrollability */
        animation: detect-scrollability linear;
        animation-timeline: scroll(self); /* this isn't supported yet in Firefox */
        
        --overflow-for-open-tooltips: visible;
        
        /* Temporarily dissolve scrolling context whenever a tooltip is open to prevent bottom cut-off */
        /* :hover-capable devices */
        @media (hover: hover) {
            &:has(.substance-tooltip :is(.tooltip-controller:hover, .tooltip-controller:focus)) {
                overflow: var(--overflow-for-open-tooltips);
            }
        }
        
        /* Touchscreens */
        @media (hover: none) {
            &:has(.substance-tooltip :is(.tooltip-controller:active, .tooltip-controller:focus)) {
                overflow: var(--overflow-for-open-tooltips);
            }
        }
    }
}

/* Modern browsers: Scrollability detector (as of v6.17 this works only in Chrome + Safari, not Firefox) */
@keyframes detect-scrollability {
    from, to {
        --overflow-for-open-tooltips: auto;
    }
}

/* Older browsers: no overflow switching, always full available height */
@supports not (animation-timeline: scroll()) {
    #actor_objectcontrol .objectcontrol-tools .toolchain-link .flyout-host:has(.substance-textpicker) {
        height: var(--flyout-max-height);
    }
}


/* --- Edge case: record lock message instead of global actions */
#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: var(--font-weight-bold);
    }
    
    .substance-richtext h4:after {
        content: ": ";
    }
}

#actor_objectcontrol .objectcontrol-tools + .substance-message {
    margin-left: 16px;
    margin-right: 16px;
}


/* !-------------------------------------------- */
/* !ACTOR: ObjectView --- major containers */
/* !-------------------------------------------- */

/* --- Actor layout */ 
#actor_incident {
    display: flex;
    -moz-column-gap: 35px;
         column-gap: 35px;
    
    /* Grid setup – referred to in #actor_header for aligning headline columns */
    --incident-main-width: 72%;
    --incident-supplement-width: 28%;
}

/* Main column */
#actor_incident .incident-main {
    width: calc(var(--incident-main-width) - 35px);
    
    --block-backcolor: var(--backcolor-block);
    --block-backcolor-marker: var(--backcolor-marker);
    --blockhead-backcolor: var(--backcolor-neutral-white);
    
    --block-inset: 10px;
}

/* Side column with attachments + history */
#actor_incident .incident-supplement {
    width: var(--incident-supplement-width);
        
    --block-backcolor: transparent;
    --blockhead-backcolor: var(--backcolor-neutral-white);
    --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: var(--block-column-gutter);
         column-gap: var(--block-column-gutter);
    align-items: flex-start;
    background-color: var(--block-backcolor);
    --block-column-gutter: 30px;
    
    /* Collapsible blocks */
    &.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;
    }
    
    /* Simpler attachments + history block */
    &: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 (with bright background) */
    &.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: var(--backcolor-neutral-white);
        
        --block-inset: 0px;
    }
    
    /* Permanently mutable block (without switch, colored background) */
    &.block-mutable.mutable-active:not(.mutable-switch) {
        --field-backcolor: var(--colorpane-field-backcolor);
        --field-bordercolor-hover: var(--colorpane-field-bordercolor-hover);
        --field-bordercolor-disabled: var(--colorpane-field-bordercolor-disabled);
    }
    
    /* Block without any content */
    &:has(.block-controller:only-child) {
        padding-bottom: 0;
    }
    
    /* Summary block incl. point directory */
    &.block-summary:has(.block-directory) {
        padding-bottom: 0;
    }
}


/* !-------------------------------------------- */
/* !ACTOR: ObjectView --- 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-controller:only-child, 
#actor_incident .incident-block.block-collapsible:not(.item-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);
}

/* State-dependent divider lines for block controllers */
#actor_incident .incident-block {
    &:has(.property-value .substance-entity.entity-state.state-type-open) .block-controller {
        border-bottom-color: var(--color-state-open-light);
    }
    
    &:has(.property-value .substance-entity.entity-state.state-type-progress) .block-controller {
        border-bottom-color: var(--color-state-progress-light);
    }
    
    &:has(.property-value .substance-entity.entity-state.state-type-ready) .block-controller {
        border-bottom-color: var(--color-state-ready-light);
    }
    
    &:has(.property-value .substance-entity.entity-state.state-type-transfer) .block-controller {
        border-bottom-color: var(--color-state-transfer-light);
    }
    
    &:has(.property-value .substance-entity.entity-state.state-type-done) .block-controller {
        border-bottom-color: var(--color-state-done-light);
    }
}


/* --- 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;
    }
    
    /* Integrated ID numbers: ready-only version */
    h3 > .substance-id {
        font-size: inherit;
        font-weight: inherit;
        
        .id-prefix {
            font: var(--textset-minus-l);
        }
        
        .id-suffix.suffix-point {
            color: var(--textcolor-standard);
            margin-right: 4px;
        }
    }
    
    /* Integrated ID numbers: crosslink version */
    h3:has(> .link-action > .substance-id) {
        min-height: 0;
        height: var(--chip-id-linked-height-large);
        
        /* Detail formatting handled in substances_big */
    }
    
    /* Integrated timestamps */
    h3 .substance-timestamp {
        display: inline-block;
        vertical-align: bottom;
    }
}


/* --- Direct controller actions */
/* Block toolbar */
#actor_incident .block-controller .block-actions {
    -moz-column-gap: 12px;
         column-gap: 12px;
}

/* Interaction states */
#actor_incident .block-controller .toolchain-link > .substance-flyout > .view-action:focus-visible {
    outline-offset: 1px;
}

/* 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;
    }
}

/* 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;
}


/* --- Controller flyouts */
/* Block-level flyouts (the combo .toolchain.substance-flyout is DEPRECATED) */
#actor_incident .block-controller .toolchain-link {
    &.substance-flyout > .flyout-host, 
    > .substance-flyout > .flyout-host {
        right: 0;
        left: auto;
        transform: none;
    }
    
    &.substance-flyout:not(:last-child) > .flyout-host, 
    &: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:not(:is(.host-size-medium, .host-size-maxi)), 
#actor_incident .incident-main .block-controller .toolchain-link > .substance-flyout > .flyout-host:not(:is(.host-size-medium, .host-size-maxi)) {
    width: var(--flyout-width-standard); /* Main column flyouts usually pack more interactivity */
}


/* !-------------------------------------------- */
/* !ACTOR: ObjectView --- Block content: Forms */
/* !-------------------------------------------- */

/* --- Large fieldlist blocks */
#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-mutable.mutable-switch.mutable-active > .substance-fieldlist {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
}

/* Make sure inner flyouts can overlap */
#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;
}

/* 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;
}

/* Collapsible segments: Expander/Collapser button */
#actor_incident .incident-block .substance-fieldlist .fieldlist-segment.segment-optional {
    /* 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;
    }
}


/* --- Inner list of form 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);
}

#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;
    }
}


/* !-------------------------------------------- */
/* !ACTOR: ObjectView --- Block content: property lists */
/* !-------------------------------------------- */

/* --- Block content: Abstract content */
#actor_incident .incident-block > * {
    width: 100%;
}

/* --- Collapsed blocks: pull out essential items into compressed key/value line */
#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;
    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;
    }
    
    /* We risk displaying values on a single line: */
    /* For complaint points, the values are well defined. State must not use multiple lines anyway. */
    /* For the customer block, we don't expect very long values */
    .property-item.item-essential .property-value {
        display: block;
        padding: 0;
        border: none;
    }
    
    .property-item.item-essential .property-value > p {
        white-space: nowrap;
    }
    
    .property-item.item-essential .property-value .substance-timestamp .timestamp-time {
        display: none;
    }
}


/* --- Multi-column layout for property lists */
#actor_incident .incident-block.block-columns {
    .block-property {
        display: table;
        flex-grow: 1;
        flex-shrink: 1;
    }
    
    /* 2 columns */
    .block-main {
        width: calc(55% - var(--block-column-gutter));
    }
    
    .block-supplement {
        width: 45%;
    }
    
    /* Special segments */
    .block-directory {
        display: block;
    }
    
    .block-detail {
        border-top: var(--line-separator);
    }
}

/* Collapsed blocks: pull out essential items in a specific order */
#actor_incident .incident-block.block-columns.block-collapsible:not(.item-active) .block-main {
    order: 2;
}

#actor_incident .incident-block.block-columns.block-collapsible:not(.item-active) .block-supplement .property-item:has(.substance-entity.entity-state) {
    order: -1;
}


/* --- Key/Value pairs */
#actor_incident .property-item {
    display: table-row;
    font: var(--textset-m);
    
    --key-font-weight: var(--font-weight-light);
    --key-font-weight-marked: var(--font-weight-regular);
    --value-font-weight: var(--font-weight-medium);
    
    /* Property key */
    .property-title {
        font-weight: var(--key-font-weight);
        padding: 10px 15px 10px 0;
        display: table-cell;
        vertical-align: top;
    }
    
    /* Property value container */
    .property-value {
        color: var(--textcolor-standard);
        padding: 10px 0 10px 0;
        width: 100%; /* enforce maximum width */
        display: table-cell;
        vertical-align: top;
        border-bottom: var(--line-separator);
    }
    
    .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;
    }
}

/* Complaint summary block with directory: wider titles */
#actor_incident .block-summary:has(.block-directory) .property-item {
    .property-title {
        width: 35%;
    }
}

/* Full-width property lists when mixed in */
#actor_incident .block-detail .property-item:first-child .property-title, 
#actor_incident .block-detail .property-item:first-child .property-value {
    padding-top: 10px;
}

/* Marked pairs */
#actor_incident .property-item.property-marked {
    background: var(--block-backcolor-marker);

    .property-title {
        font-weight: var(--key-font-weight-marked);
        color: var(--textcolor-emphasis);
        padding-left: 5px;
    }
    
    .property-value {
        color: var(--textcolor-emphasis);
        padding-right: 5px;
    }
    
    .property-value p {
        color: var(--textcolor-emphasis);
    }
}

/* Value variants */
#actor_incident .property-item .property-value {
    /* Harmonized font weight */
    > p:not(.substance-entity), 
    > .substance-flyout .flyout-controller, 
    .substance-editor .editor-value:not(.substance-richtext), 
    > .substance-entity:is(.entity-user, .entity-trip, .entity-channel, .entity-complaint) {
        font-weight: var(--value-font-weight);
    }
    
    /* Vertical stacking inside value cell */
    > p + p, 
    > * + .value-link, 
    > .substance-flyout + *, 
    > * + .substance-entity.entity-validation, 
    > * + .substance-flyout .substance-entity.entity-validation {
        margin-top: 0.7em;
    }
    
    /* Visual edge adjustments (TODO: should be formalized) */
    .substance-editor.editor-mutable:not(.editor-type-boolean) {
        margin-top: -6px;
        margin-left: -5px;
        display: block;
    }
    
    .substance-entity:first-child {
        margin-top: -5px;
    }
    
    /* Width of complex value objects */
    .substance-entity {
        display: block;
    }
    
    > .substance-flyout, 
    .substance-entity.entity-validation, 
    .substance-entity.entity-state {
        display: inline-block; /* could act as flyout-controller or would look awkward */
    }
    
    /* Embedded states with tooltip */
    .substance-tooltip .tooltip-controller:has(.substance-entity.entity-state) {
        margin-top: -5px;
    }

    .substance-tooltip .substance-entity.entity-state {
        margin-top: 0;
    }
    
    /* DEPRECATED PENALTY: Special case: Incident type */
    .entity-incident + p {
        padding-left: 30px;
    }
    
    /* Value-internal multi-property layout */
    .value-link {
        display: flex;
        flex-wrap: wrap;
        -moz-column-gap: 10px;
             column-gap: 10px;
        row-gap: 5px;
        align-items: center;
    }
    
    /* Workflow state chips in combination with dunning level or datestamps */
    &:has(.substance-entity.entity-state + :is(.entity-dunning, .substance-timestamp)) {
        display: flex;
        flex-wrap: wrap;
        -moz-column-gap: 10px;
             column-gap: 10px;
        row-gap: 10px;
        align-items: center;
        
        .entity-dunning {
            margin-top: 0;
        }
    }
}

/* TEMPORARY EXCEPTION / Penalty goodwill flyout (remove when TP-861 is done) */
#actor_incident .block-main .property-item .property-value .substance-flyout .flyout-host {
    left: 0;
    transform: none;
}

/* NOT USED YET: 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, 
    .tooltip-controller {
        margin-top: 0;
    }
    
    
    .substance-entity {
        display: block;
    }
}


/* !-------------------------------------------- */
/* !ACTOR: ObjectView --- Block content: Tables */
/* !-------------------------------------------- */

/* --- Block content: Lists of related entities, directory of complaint points (basic init), sub-opinions */
#actor_incident .block-related .substance-table, 
#actor_incident .incident-block .block-directory .substance-table {
    margin: 0 calc(-1 * var(--block-inset)) 0 calc(-1 * var(--block-inset));
    width: calc(100% + (2 * var(--block-inset)));
    
    /* Table rows */
    tr:first-child {
        border-top: none;
    
        td {
            padding-top: calc(var(--table-body-padding-vertical) - 4px);
        }
        
        &:has(td.col-marked) td {
            padding-top: calc(var(--table-body-padding-vertical) + 1px);
        }
    }

    /* Table cells */
    td:first-child {
        padding-left: var(--block-inset);
    }
    
    td.col-marked {
        background-color: var(--block-backcolor-marker);
    }
    
    td:not(:last-child) {
        padding-right: 0;
    }
    
    /* Tables with column titles */
    &:has(thead) tbody tr:first-child {
        border-top: var(--line-separator);
        
        td {
            padding-top: calc(var(--table-body-padding-vertical) - 4px);
        }
    }

    /* Validation chips */
    .substance-entity.entity-validation {
        margin-bottom: 10px;
        width: -moz-min-content;
        width: min-content;
        
        &:last-child {
            margin-bottom: 0;
        }
    }
    
    /* Admin: category tree paths for text block connections */
    .substance-entity:is(.admin-asset-content, .admin-asset-structure).substance-richtext ul li {
        display: inline-block;
        margin-bottom: 0;
        margin-right: 0.4em;
    }
    
    /* IDs with additional information */
    .substance-id:has(+ *) {
        margin-bottom: 5px;
    }
    
    /* Special cell content: primary actions in last cell per row */
    td:last-child:has(.primary-action) {
        text-align: right;
    }
    
    /* Exceptions for tables with only one row */
    tr:only-child td:first-child > p {
        font-weight: var(--font-weight-regular);
        color: inherit;
    }
}


/* --- Intra-block directories */
#actor_incident .incident-block .block-directory {
    --directory-separator-master: var(--line-signature);
    --directory-separator-inside: var(--line-signature-white);
}

/* Directory of related opinions + sub-opinions */
#actor_incident .incident-block:not(.block-summary) .block-directory {
    /* Table headline */
    h4 {
        color: var(--subhead-textcolor);
        margin: 10px 0 10px 0;
        text-transform: var(--subhead-transform);
        font: var(--subhead-textset);
        letter-spacing: var(--spacing-subhead);
    }

    .substance-table tr:is(.directory-point, .directory-opinion):first-child {
        border-top: var(--directory-separator-master);
    }
    
    /* Inaccessible parent opininon requests */
    .substance-table .substance-id.id-placeholder {
        max-width: 20ch;
        white-space: normal;
    }
    
    /* Opinion IDs */
    .substance-table .link-action .substance-id:not(:has(.id-suffix)) {
        padding-right: 4px;
    }
    
    tr.directory-opinion {
        border-top: var(--directory-separator-inside);
    }
    
    /* Tight chips */
    tr.directory-opinion, 
    tr.directory-opinion-sub {
        .link-action,
        .substance-tooltip,
        .substance-entity {
            width: -moz-min-content;
            width: min-content;
        }
        
        .substance-entity.entity-opinion {
            width: auto;
            display: inline-flex;
            align-items: center;
        }
    }
}

/* Only for ObjectView summary block: Complaint point directory */
#actor_incident .block-summary .block-directory .substance-table {
    /* Table rows */
    tr.directory-point {
        border-top: var(--directory-separator-inside);

        /* Table cells: column shaping */
        td {
            padding-top: var(--table-body-padding-vertical-s);
            padding-bottom: var(--table-body-padding-vertical-s);
        }
        
        &:nth-child(1) td {
            padding-top: calc(var(--table-body-padding-vertical) - 1px);
        }
        
        td:nth-child(1), 
        td:nth-child(2), 
        td:nth-child(4) {
            width: 1%; /* only column 3 may stretch */
        }
    }
    
    tr.directory-opinion {
        td {
            padding-top: var(--table-body-padding-vertical-xs);
            padding-bottom: var(--table-body-padding-vertical-xs);
        }
        
        /* Tight chips */
        .link-action,
        .substance-entity {
            width: -moz-min-content;
            width: min-content;
        }
        
        .substance-entity.entity-opinion {
            width: auto;
            display: inline-flex;
            align-items: center;
        }
    }
    
    /* Column 1: stateful point markers with scroll links */
    tr.directory-point td:nth-child(1) {
        > :first-child {
            position: relative;
            top: -4px; /* text baseline alignment */
        }
        
        /* Full width for inaccessible complaint point indices */
        > .substance-id, 
        > .substance-id * {
            width: 100%;
            text-align: right;
            border-radius: var(--radius-chip);
            --backcolor-id-suffix: var(--backcolor-id-suffix-inverse);
        }
        
        > .substance-id {
            border: var(--line-separator-inverse);
        }

        /* Dedicated cursors for scroll links + inaccessible complaint points */
        @media (hover: hover) {
            .link-action:hover {
                cursor: s-resize;
            }
            
            > :is(.substance-entity, .substance-id):hover {
                cursor: not-allowed;
            }
        }
    }
    
    /* Column 2: responsibilities & flyout controllers */
    tr.directory-point td:nth-child(2) {
        /* Single-line responsibility chain */
        > p:first-child {
            white-space: nowrap;
        }
        
        > p:not(:only-child) {
            padding-bottom: 8px;
            border-bottom: var(--line-separator);
            margin-bottom: 8px;
        }
        
        .substance-flyout .flyout-host {
            left: 0;
            right: auto;
        }
    }
    
    tr.directory-point:has(+ tr.directory-opinion) td:nth-child(2) > p:not(:only-child) {
        border-bottom: none;
    }
    
    /* Column 2 + 3: set lock icon for inaccessible complaint points */
    tr.directory-point td:first-child:not(:has(.link-action)) + td > :first-child, 
    tr.directory-point td:first-child:not(:has(.link-action)) + td + td > :first-child {
        padding-left: 14px;
        position: relative;
        
        &:before {
            content: "";
            display: block;
            background: transparent center var(--asset-validation-locked) no-repeat;
            width: 11px;
            height: 11px;
            margin-top: -6px;
            position: absolute;
            left: 0;
            top: 50%;
        }
    }

    /* Column 3: categorization + opinion links */
    tr.directory-point td:nth-child(3) {
        .substance-richtext ul li {
            display: inline-block;
            margin-bottom: 0;
            margin-right: 0.4em;
        }
    }
    
    /* Column 3: sub-tables for opinion links */
    tr.directory-opinion {
        .value-link {
            display: flex;
            flex-wrap: wrap;
            -moz-column-gap: 10px;
                 column-gap: 10px;
            row-gap: 5px;
            align-items: center;
        }
    }

    /* Column 4: datestamps (deadlines, other qualified dates) */
    tr.directory-point td:nth-child(4),
    tr.directory-opinion td:nth-child(2) {
        &.col-right .substance-timestamp {
            text-align: right;
        }
        
        &.col-right .substance-placeholder {
            text-align: right;
        }
    }
    
    tr.directory-opinion td:nth-child(2) {
        vertical-align: middle;
    }
}


/* !-------------------------------------------- */
/* !ACTOR: ObjectView --- Block content: longform descriptions */
/* !-------------------------------------------- */

#actor_incident .block-description .editor-value {
    color: var(--textcolor-standard);
}


/* !-------------------------------------------- */
/* !ACTOR: ObjectView --- Attachment block */
/* !-------------------------------------------- */

/* --- 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;
        }
    }
}


/* !-------------------------------------------- */
/* !ACTOR: ObjectView --- History block */
/* !-------------------------------------------- */

#actor_incident .block-history {
    --event-inset: 10px;
}


/* --- Special 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 (not used yet) */
#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;
    }
}


/* --- Entries for a single day */
#actor_incident .block-history h4 .substance-timestamp {
    font: var(--textset-m);
    color: var(--textcolor-standard);
    margin-bottom: 10px;
    text-align: right;

    .timestamp-date {
        font-weight: var(--font-weight-regular);
    }
    
    .timestamp-day {
        font-weight: var(--font-weight-medium);
    }
}

#actor_incident .block-history .history-list {
    margin-bottom: 10px;
    background-color: var(--backcolor-block);
}


/* --- Single history event */
/* Event container */
#actor_incident .block-history .history-event {
    position: relative;
    color: var(--textcolor-standard);
    padding: var(--event-inset);
    border-bottom: var(--line-separator);
    
    --history-action-textset: var(--font-weight-medium) var(--font-size-m) var(--font-base);
    --history-comment-textset: var(--font-weight-medium) var(--font-size-s) var(--font-base);
    --history-metadata-textset: var(--font-weight-regular) var(--font-size-m) var(--font-base);
    --history-time-textset: var(--font-weight-medium) var(--font-size-s) var(--font-base);

    &: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: var(--history-action-textset);
        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-suffix: var(--backcolor-id-suffix-inverse);
    }
    
    /* Event content: optional download */
    .event-content .event-action .link-action {
        color: var(--button-tertiary-text-color);
        transition: var(--transition-color);
    }
    
    @media (hover: hover) {
        .event-content .event-action .link-action:hover {
            color: var(--button-tertiary-text-color-hover);
            transition: var(--transition-color);
        }
    }
    
    /* Event content: optional comment */
    &:not(.event-experiment) .event-comment {
        margin-top: 5px;
        font: var(--history-comment-textset);
        grid-row: 2;
        grid-column: 1 / -1;
    }
    
    @media (hover: hover) {
        .event-comment .substance-richtext[title]:hover {
            cursor: help;
        }
    }
    
    /* Event metadata: container arrangement */
    .event-metadata {
        font: var(--history-metadata-textset);
        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(--history-time-textset);
        }
    }

    /* Event metadata: optional deadline */
    .event-deadline {
        width: 100%;
        margin-top: 4px;
    }
    
    /* Event metadata: optional recipient */
    .event-recipient {
        width: 100%;
    }
}

/* --- EXPERIMENTAL: refactored history event */
#actor_incident .block-history.history-experiment h4 .substance-timestamp {
    text-align: left;
    margin-bottom: 6px;
    color: var(--textcolor-accent);
}

#actor_incident .block-history.history-experiment .history-list {
    border-top: var(--line-signature);
}

#actor_incident .block-history .history-event.event-experiment {
    border-bottom: var(--line-separator-inverse-thick);
    border-bottom-width: 6px;
    border-left: 1px solid transparent;
    padding-left: 9px;
    
    &:has(.tooltip-controller:hover), 
    &:has(.tooltip-controller:focus-visible) {
        border-left: var(--line-tooltip);
    }
    
    .event-action .substance-timestamp {
        display: inline-block; 
        vertical-align: middle; 
        font: var(--textset-s);
        font-weight: var(--font-weight-medium);
        color: var(--textcolor-accent);
        padding-right: 6px;
    }
    
    .event-action .link-action {
        display: inline;
        color: var(--textcolor-standard);
        text-decoration: underline;
    }
    
    .event-content:has(.tooltip-controller):has(.action-download) {
        grid-template-columns: auto min-content min-content;
        
        .action-download {
            grid-column: 2;
        }
        .tooltip-controller {
            grid-column: 3;
            margin-left: 5px;
        }
    }
    
    .event-comment {
        margin-bottom: 10px;
        grid-row: 2;
        grid-column: 1 / -1;
    }

    .event-author {
        flex-grow: 0;
    }
    
    .event-metadata:has(.entity-channel) {
        margin-top: -8px;
    }
    
    .event-deadline {
        margin-top: 10px;
        margin-bottom: -6px;    
    }
    
    .event-recipient {
        flex-grow: 0; 
        width: auto; 
        margin-left: auto;
        
        .substance-entity.entity-user.user-recipient {
            padding-left: 28px;
        }
        
        .substance-entity.entity-user.user-recipient:before {
            display: none;
            
        }
        
        .substance-entity.entity-channel {
            bottom: -8px;
            margin-left: 5px;
        }
    }
}

/* -------------------------------------------- */
/* 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:
:: 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:
:: two tribes EINS: Violations of accessibility standards and patterns
:: two tribes EINS: Misconfigured EINS baseline UI components
*/
/* -------------------------------------------- */
/* Current scope of DREI core + framework test modules: 

:: 🌐🛑 35 violations 
:: 🌐⚠️ 9 warnings

:: ♿️🛑 6 violations 
:: ♿️⚠️ 14 warnings

:: 1️⃣🛑 8 violations 
:: 1️⃣♿️⚠️ 14 warnings
:: 1️⃣⚠️ 7 warnings
*/

/* -------------------------------------------- */
/* !DREI SETUP: Configuration of visual error markers */
/* -------------------------------------------- */
/* Root condition for test execution: 
:: DOM subtrees marked with .tt-drei gateway class
/* -------------------------------------------- */

.tt-drei {
    /* !--- Expose version numbers of test modules */
    --drei-📅-core: "77";
    --drei-📅-framework: "69";
    --drei-📅-application: "none";


    /* !--- INITIALIZATION of visual marker properties */
    --drei-INIT-color-ok: #BCCF00;
    --drei-INIT-color-warn: #F6A000;
    --drei-INIT-color-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-suspicious: inset;
    --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 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: Product-specific violations */
    --drei-mark-app-crisis: var(--drei-INIT-border-thin) var(--drei-INIT-border-suspicious) var(--drei-INIT-color-crisis);
    --drei-mark-app-warn: var(--drei-INIT-border-thin) var(--drei-INIT-border-suspicious) 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);
    
    --drei-animark-app-crisis: drei-INIT-anim-app-crisis var(--drei-INIT-animation-runtime) ease forwards var(--drei-INIT-animation-delay);
    --drei-animark-app-warn: drei-INIT-anim-app-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);}
}

@keyframes drei-INIT-anim-app-crisis {
    100% {outline: var(--drei-mark-app-crisis);}
}

@keyframes drei-INIT-anim-app-warn {
    100% {outline: var(--drei-mark-app-warn);}
}


/* !-------------------------------------------- */
/* !DREI Core test module: 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;
    
    --drei-mark-app-crisis: transparent;
    --drei-mark-app-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-mark-app-warn: transparent;
}


/* !-------------------------------------------- */
/* !DREI Core test module: EXCLUSION
:: Exclusion of embedded 3rd-party-product: TinyMCE */
/* !-------------------------------------------- */

.tox-tinymce, .tox-tinymce *,
.tox-tinymce-aux, .tox-tinymce-aux * {
    --3️⃣-source: unset !important;
    --3️⃣-debug-tip: unset !important;

    --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-mark-app-crisis: transparent;
    --drei-mark-app-warn: transparent;
}


/* !-------------------------------------------- */
/* !DREI Core test module: DEBUGGING
:: 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: 🌐 HTML
:: Generic malformed HTML tags & constructs */
/* !-------------------------------------------- */

.tt-drei {
    /* !--- Deprecated HTML elements */
    /* CRISIS: no <center> */
    center {
        outline: var(--drei-mark-html-crisis) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/center";
        --3️⃣-debug-tip: "🌐🛑 The <center> element has long been deprecated and won't work anymore on all devices/browsers. It should be replaced with another HTML element and centered with CSS.";
    }

    /* CRISIS: no <font> */
    font {
        outline: var(--drei-mark-html-crisis) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/font";
        --3️⃣-debug-tip: "🌐🛑 The <font> element is ancient and has long been deprecated. At best it will do nothing, at worst in will cause unpredictable text rendering. Typography should be configured with CSS.";
    }
    
    /* CRISIS: no <nobr> */
    nobr {
        outline: var(--drei-mark-html-crisis) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/nobr";
        --3️⃣-debug-tip: "🌐🛑 The <nobr> element was never standard HTML and has long been deprecated. Non-breaking text should be configured with CSS.";
    }
    
    /* CRISIS: no <strike> */
    strike {
        outline: var(--drei-mark-html-crisis) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/strike";
        --3️⃣-debug-tip: "🌐🛑 The <strike> element long been deprecated. It should be replaced with HTML <del> or <s>, or even better with CSS.";
    }


    /* !--- HTML landmark elements */
    /* CRISIS: no illegal nesting of <main> elements */
    *:is(main, header, footer, article, aside, nav, section) main {
        outline: var(--drei-mark-html-crisis) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/main#technical_summary";
        --3️⃣-debug-tip: "🌐🛑 A <main> landmark element must not be a child of sectioning parents.";
    }
    
    /* CRISIS: no multiple main elements at the same time */
    main:not([hidden]) ~ main:not([hidden]),
    main:not([hidden]):has(~ main:not([hidden])) {
        outline: var(--drei-mark-html-crisis) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/main#try_it";
        --3️⃣-debug-tip: "🌐🛑 Only one <main> landmark element must be visible at the same time. Other <main> elements must have the attribute 'hidden'.";
    }
    
    /* CRISIS: no nesting for header and footer */
    :is(header, footer) :is(header, footer) {
        outline: var(--drei-mark-html-crisis) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/header#technical_summary";
        --3️⃣-debug-tip: "🌐🛑 <header> and <footer> elements must not be nested.";
    }
    

    /* !--- 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:not(:is([role="status"], [role="alert"], [aria-live])) {
        outline: var(--drei-mark-html-warn) !important;
        --3️⃣-debug-tip: "🌐⚠️ A headline should not be empty.";
    }
    
    /* CRISIS: no flow elements inside headlines */
    :is(h1, h2, h3, h4, h5, h6) :is(p, ul, ol, div, table) {
        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 contain elements like <p>, <ul>, <ol> or <div>. Generally, headlines are only allowed to contain HTML children of type phrasing content.";
    }


    /* !--- Generic HTML phrasing tags */
    /* CRISIS: No flow content children */
    :is(span, strong, em, mark, abbr, b, i) :is(p, div, ul, ol, table, h1, h2, h3, h4, h5, h6) {
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Content_categories#flow_content";
        --3️⃣-debug-tip: "🌐🛑 Elements <span>, <strong>, <em>, <mark>, <abbr>, <b> and <i> may not contain container-like children of type flow content (e.g. <p> or a <div>). It can cause weird UI rendering and is an a11y violation.";
    }


    /* !--- HTML tag <p> */
    /* 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 or other containers inside of paragraphs */
    p:has(:is(ul, ol, div)) {
        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>, <ol> or <div>. Generally <p> is only allowed to contain HTML children of type phrasing content.";
    }
    
    /* CRISIS: No headlines inside of paragraphs */
    p:has(: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/p#technical_summary";
        --3️⃣-debug-tip: "🌐🛑 <p> elements must not contain headlines. Generally <p> is only allowed to contain HTML children of type phrasing content.";
    }


    /* !--- HTML tag <a> */
    /* CRISIS: No nested links */
    a a {
        outline: var(--drei-mark-html-crisis) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a#technical_summary";
        --3️⃣-debug-tip: "🌐🛑 <a> elements must not be nested.";
    }
    
    /* CRISIS: links must not contain interactive elements */
    a:has(:is(button, input, select, textarea, details, label, iframe)) {
        outline: var(--drei-mark-html-crisis) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a#technical_summary";
        --3️⃣-debug-tip: "🌐🛑 <a> elements must not contain any interactive or actionable HTML elements.";
    }
    
    /* CRISIS: No outdated named anchors */
    a[name] {
        outline: var(--drei-mark-html-crisis) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a#name";
        --3️⃣-debug-tip: "🌐🛑 The 'name' attribute for <a> elements has been deprecated a long time ago. Use an 'id' attribute instead.";
    }
    
    /* WARN: <a> without href has almost no good use case */
    a:not([href]):not([aria-disabled="true"]), 
    a[href=""] {
        outline: var(--drei-mark-html-warn) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a#href";
        --3️⃣-debug-tip: "🌐⚠️ The 'href' attribute for <a> elements is basically required (incl. a non-empty value) except for very rare edge cases (e.g. when adding 'aria-disabled=true'.";
    }


    /* !--- 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(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.";
    }
    
    /* CRISIS: buttons must not contain interactive elements */
    button:has(:is(a, button, input, select, textarea, details, label, iframe)) {
        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 interactive or actionable HTML elements.";
    }

    /* WARN: Do not use outdated <button> alternatives */
    input[type="button"], input[type="submit"], input[type="image"] {
        outline: var(--drei-mark-html-warn) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/button";
        --3️⃣-debug-tip: "🌐⚠️ Usage of legacy input types is practically deprecated outside of legacy systems. Although it's still valid HTML, these input types have usability issues and should be replaced by <button>.";
    }
    

    /* !--- 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.";
    }
    
    /* CRISIS: No deprecated attributes */
    img[name], 
    img[border], 
    img[align] {
        outline: var(--drei-mark-html-crisis) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#deprecated_attributes";
        --3️⃣-debug-tip: "🌐🛑 The attributes 'name', 'border' and 'align' are deprecated on <img>. Better use 'id' for 'name'. Borders and alignment should be controlled with CSS.";
    }

    
    /* !--- 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 tag <hgroup> */
    /* CRISIS: Only some elements are allowed inside <hgroup> */
    hgroup:has(:not(> :is(p, h1, h2, h3, h4, h5, h6))) {
        outline: var(--drei-mark-html-crisis) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/hgroup#technical_summary";
        --3️⃣-debug-tip: "🌐🛑 A <hgroup> must only contain <p> and headline tags as direct children.";
    }


    /* !--- HTML tag <time> */
    time[datetime=""] {
        outline: var(--drei-mark-html-warn) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/time#attributes";
        --3️⃣-debug-tip: "🌐⚠️ The 'datetime' attribute of <time> should not be empty.";
    }


    /* !--- HTML tag <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 */
    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).";
    }
    
    /* CRISIS: No label with interactive elements */
    label :is(button, input[type="button"]) {
        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 interactive elements.";
    }
    
    
    /* !--- 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 */
    /* CRISIS: No deprecated attributes */
    table[border], 
    table[align] {
        outline: var(--drei-mark-html-crisis) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/table#deprecated_attributes";
        --3️⃣-debug-tip: "🌐🛑 The attributes 'border' and 'align' are deprecated on <table>. They can cause annoying layout issues. Table layout and styling should be controlled with CSS.";
    }

    /* CRISIS: No deprecated attributes on table rows */
    tr[align], 
    tr[valign] {
        outline: var(--drei-mark-html-crisis) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/tr#deprecated_attributes";
        --3️⃣-debug-tip: "🌐🛑 The attributes 'align' and 'valign' are deprecated on <tr>. They can cause annoying layout issues. Table layout and styling should be controlled with CSS.";
    }

    /* CRISIS: No deprecated attributes on table cells */
    :is(th, td)[width], 
    :is(th, td)[align], 
    :is(th, td)[valign] {
        outline: var(--drei-mark-html-crisis) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/td#deprecated_attributes";
        --3️⃣-debug-tip: "🌐🛑 The attributes 'width', 'align' and 'valign' are deprecated on <th> and <td>. They can cause annoying layout issues. Table layout and styling should be controlled with CSS.";
    }
    
    /* 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: thead and tbody should not be empty */
    table :is(tbody:empty, thead:empty) {
        display: block; /* otherwise it would be invisible */
        outline: var(--drei-mark-html-warn) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody";
        --3️⃣-debug-tip: "🌐⚠️ While an empty <tbody> or <thead> are still valid HTML, it's very unclean and an a11y problem. They should not exist.";
    }
    
    /* 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*="ö"], [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 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*="#"], [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. While some special characters might be technically legal, they are still very risky to use.";
    }
    
    /* 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.";
    }
    
    /* CRISIS: duplicate IDs */
    /* Note: this test needs the DREI bookmarklet to fire */
    *[id].drei-inspector-marker {
        outline: var(--drei-mark-html-crisis) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/id#syntax";
        --3️⃣-debug-tip: "🌐🛑 ID attributes must contain a unique value in the context of all currently present DOM elements.";
    }
}


/* !-------------------------------------------- */
/* !DREI Core test module: ♿️ Accessibility
:: Violations of accessibility standards and patterns */
/* !-------------------------------------------- */

.tt-drei {
    /* !--- HTML tag <p> */
    /* WARN: No empty paragraphs */
    p:empty:not(:is([role="status"], [role="alert"], [aria-live])) {
        outline: var(--drei-mark-a11y-warn) !important;
        --3️⃣-debug-tip: "♿️⚠️ We should not have empty <p> elements because they can cause layout issues and are 'noisy' for screenreaders.";
    }
    
    
    /* !--- HTML tag <button> */
    /* WARN: Don't lazily fake a <button> */
    div[role="button"] {
        outline: var(--drei-mark-a11y-warn) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/button";
        --3️⃣-debug-tip: "♿️⚠️ Really? A <div> instead of a <button>? This is bad style and very rarely done correctly with all required keyboard/a11y interactions configured. A <button> is a much better choice.";
    }
    
    /* WARN: Don't abuse other elements as a <button> */
    *[role="button"]:not(button, a, div) {
        outline: var(--drei-mark-a11y-warn) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/button";
        --3️⃣-debug-tip: "♿️⚠️ Using other elements than <button> for the ARIA role 'button' is very rarely done correctly with all required keyboard/a11y interactions configured. A <button> is a much better choice.";
    }


    /* !--- HTML tag <label> */
    /* WARN: No label without a 'for' attribute except it's nesting a form element */
    label:is(:not([for]), [for=""]):not(:has(:is(input, textarea, select))) { 
        outline: var(--drei-mark-a11y-warn) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/label#associating_a_label_with_a_form_control";
        --3️⃣-debug-tip: "♿️⚠️ Every <label> must have a 'for' attribute containing an ID to its paired <input>. Alternatively it may wrap a form element.";
    }
    
    /* CRISIS: Label must not nest multiple form elements */
    label:has(:is(input, textarea, select) ~ :is(input, select, textarea)) { 
        outline: var(--drei-mark-a11y-crisis) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/label#associating_a_label_with_a_form_control";
        --3️⃣-debug-tip: "♿️🛑 A <label> must not wrap multiple form elements.";
    }

    /* WARN: 'for' attribute in label must point to existing ID */
    /* Note: this test needs the DREI bookmarklet to fire */
    label[for].drei-inspector-marker { 
        outline: var(--drei-mark-a11y-warn) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/label#associating_a_label_with_a_form_control";
        --3️⃣-debug-tip: "♿️⚠️ The 'for' attribute of a <label> must point to an ID which is existing in the DOM.";
    }
    
    /* CRISIS: Label with a 'for' attribute must point to a single ID */
    label[for*=" "] { 
        outline: var(--drei-mark-a11y-crisis) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/label#associating_a_label_with_a_form_control";
        --3️⃣-debug-tip: "♿️🛑 For 'for' attribute of a <label> must point to a single ID element, not multiple.";
    }


    /* !--- HTML tags <fielset> and <legend> */
    /* WARN: A <fieldset> must either have a <legend> or aria-labelledby */
    fieldset:not(:has(legend)):not([aria-labelledby]) { 
        outline: var(--drei-mark-a11y-warn) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/legend";
        --3️⃣-debug-tip: "♿️⚠️ A <fieldset> should be described either by a <legend> or an 'aria-labelledby' attribute.";
    }
    
    /* WARN: A <fieldset> must not have both a <legend> and aria-labelledby */
    fieldset:has(legend)[aria-labelledby] { 
        outline: var(--drei-mark-a11y-warn) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/fieldset";
        --3️⃣-debug-tip: "♿️⚠️ A <fieldset> should have either a <legend> or an 'aria-labelledby' attribute but not both. This is confusing for screenreaders.";
    }


    /* !--- 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.";
    }

    *[title] > *[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: "♿️⚠️ Nested 'title' attributes are confusing and it's often unclear which text gets displayed on :hover. Either the parent or the child should have a 'title' attribute but not both.";
    }
    
    /* WARN: title attribute should be set on <abbr> elements */
    abbr[title=""], 
    abbr:not([title]):not(:is(*[title] > abbr)) {
        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. Alternatively a parent element could have an explaining 'title' attribute.";
    }

    /* WARN: <img> elements should always have an alt attribute even if empty */
    img:not([alt]):not([aria-labelledby]) {
        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. If no image description is available the 'alt' attribute should be set to an empty string (helping screenreaders ignore it).";
    }


    /* !--- ARIA attributes */
    /* CRISIS: ARIA labels are forbidden on some common elements */
    :is(span, p, h1, h2, h3, h4, h5, h6, li, ol, ul, strong, em, code, sub)[aria-label]:not(:is([role="group"], [role="toolbar"], [role="dialog"], [role="alertdialog"], [role="listbox"], [role="menu"], [role="menubar"], [role="radiogroup"], [role="tablist"], [role="tree"])), 
    :is(span, p, h1, h2, h3, h4, h5, h6, li, ol, ul, strong, em, code, sub)[aria-labelledby]:not(:is([role="group"], [role="toolbar"], [role="dialog"], [role="alertdialog"], [role="listbox"], [role="menu"], [role="menubar"], [role="radiogroup"], [role="tablist"], [role="tree"])) {
        outline: var(--drei-mark-a11y-crisis) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label";
        --3️⃣-debug-tip: "♿️🛑 ARIA labels or references to labels are only allowed on HTML element with particular, associated roles. Placing them on other common elements (e.g. a <div>, a <p> or <h1>) can actually disrupt the narration of a screenreader. At best these attributes will be ignored.";
    }

    /* WARN: ARIA labels on <div> need justification */
    div[aria-label]:not(:is([role="region"], [role="group"], [role="toolbar"], [role="dialog"], [role="alertdialog"], [role="listbox"], [role="menu"], [role="menubar"], [role="radiogroup"], [role="tablist"], [role="tree"])), 
    div[aria-labelledby]:not(:is([role="region"], [role="group"], [role="toolbar"], [role="dialog"], [role="alertdialog"], [role="listbox"], [role="menu"], [role="menubar"], [role="radiogroup"], [role="tablist"], [role="tree"])) {
        outline: var(--drei-mark-a11y-warn) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label";
        --3️⃣-debug-tip: "♿️⚠️ ARIA labels or references to labels on a <div> are mostly ignored but can disrupt some screenreaders due to ARIA role escalation. Usage of these ARIA attributes has to be justified.";
    }

    /* CRISIS: ARIA ID references with CSS ID syntax */
    *[aria-owns*="#"], 
    *[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.";
    }
    
    /* CRISIS: Some ARIA attributes only allow one single ID reference */
    *[aria-activedescendant*=" "] {
        outline: var(--drei-mark-a11y-crisis) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-activedescendant#values";
        --3️⃣-debug-tip: "♿️🛑 The ARIA attribute 'aria-activedescendant' does not allow multiple HTML IDs as value.";
    }

    /* CRISIS: ARIA ID references must point to existing IDs */
    /* Note: this test needs the DREI bookmarklet to fire */
    *[aria-owns].drei-inspector-marker, 
    *[aria-controls].drei-inspector-marker, 
    *[aria-describedby].drei-inspector-marker, 
    *[aria-labelledby].drei-inspector-marker {
        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 must point to IDs which are existing in the DOM.";
    }

    /* WARN: ARIA ID references with empty or buggy values */
    *:is([aria-owns=""], [aria-owns="null"], [aria-owns="undefined"]), 
    *:is([aria-controls=""], [aria-controls="null"], [aria-controls="undefined"]), 
    *:is([aria-describedby=""], [aria-describedby="null"], [aria-describedby="undefined"]), 
    *:is([aria-labelledby=""], [aria-labelledby="null"], [aria-labelledby="undefined"]) {
        outline: var(--drei-mark-a11y-warn) !important;
        --3️⃣-debug-tip: "♿️⚠️ ARIA attributes referencing HTML IDs of other elements should never be empty or contain spurious values like 'null' or 'undefined'.";
    }

    /* 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.";
    }
    
    /* WARN: ARIA labels should never be empty */
    *[aria-label=""] {
        outline: var(--drei-mark-a11y-warn) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label";
        --3️⃣-debug-tip: "♿️⚠️ An aria-label should never be empty. It should contain a meaningful label string or be ommitted.";
    }
}


/* !-------------------------------------------- */
/* !DREI framework test module: 1️⃣ two tribes EINS framework
:: 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: "1️⃣♿️⚠️ 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).";
    }
    
    /* TEST NEUTRALIZATION: honeypot and helper <input> don't have to be labelled */
    input:not(:is([aria-label], [aria-labelledby]))[aria-hidden="true"][tabindex="-1"] {
        outline: none !important;
        --3️⃣-debug-tip: unset;
    }

    /* WARN: Don't use both <label> and explicit ARIA labels together */
    .field-container:has(label):has(:is(textarea[aria-label], input[aria-label], select[aria-label], textarea[aria-labelledby], input[aria-labelledby], select[aria-labelledby])) {
        outline: var(--drei-mark-a11y-warn) !important;
        --3️⃣-debug-tip: "1️⃣♿️⚠️ If a form field already has an accompanying <label>, it must not have an additional aria-label or aria-labelledy. These attribute should only be used if a connected <label> isnt' existing.";
    }

    /* WARN: Field entries should be ARIA Live regions */
    .field-entry:not([aria-live="polite"]) {
        outline: var(--drei-mark-a11y-warn) !important;
        --3️⃣-debug-tip: "1️⃣♿️⚠️ A .field-entry container should be an ARIA Live region because it could throw error messages.";
    }
}


/* !-------------------------------------------- */
/* !DREI framework test module: 1️⃣ two tribes EINS framework
:: 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: "1️⃣⚠️ 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 - Wrappers & containers */
    /* CRISIS: substance-fieldlist must not be nested */
    .substance-fieldlist .substance-fieldlist {
        outline: var(--drei-mark-eins-crisis) !important;
        --3️⃣-debug-tip: "1️⃣🛑 .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: "1️⃣🛑 .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: "1️⃣🛑 .field-container must always be wrapped within a .field-entry.";
    }
    
    
    /* !--- COMPONENT: Form components - Field actions */
    /* 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: "1️⃣⚠️ A .field-container marked with .field-action must contain a .primary-action (a helper button doing something for/with the <input> element).";
    }
    

    /* !--- COMPONENT: Form components - Grouping of multiple form elements */
    /* 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: "1️⃣🛑 Multiple .field-container instances are only allowed for checkbox & radio groups.";
    }
    
    /* WARN: singular checkboxes should not be wrapped in a group */
    .field-entry:is(.checkbox-group, .radio-group):not(:has(.field-container + .field-container)):not([aria-owns]) {
        outline: var(--drei-mark-eins-warn) !important;
        --3️⃣-debug-tip: "1️⃣♿️⚠️ A singular checkbox or radio button should not be wrapped in a declared group of form elements (unless it connects to another .field-entry instance with 'aria-owns'). This is noisy for a screenreader.";
    }
    
    /* WARN: radio and checkbox groups need the proper ARIA 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: "1️⃣♿️⚠️ 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: ARIA group is only allowed for radio and checkbox groups */
    .field-entry:not(:is(.checkbox-group, .radio-group))[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: "1️⃣♿️⚠️ A .field-entry has to be .radio-group or .checkbox-group to be allowed to carry the attribute role='group'.";
    }
    
    
    /* !--- COMPONENT: Form components - Field comments */
    /* WARN: form elements with no aria-describedby featuring field-comment */
    .field-entry:not(:is(.checkbox-group, .radio-group)):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: "1️⃣♿️⚠️ IDs  of .field-comment instances must always be referenced with an 'aria-describedby' attribute on their related form element.";
    }
    
    .field-entry:is(.checkbox-group, .radio-group):has(.field-comment):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: "1️⃣♿️⚠️ For checkbox/radio groups, the IDs  of .field-comment instances must always be referenced with an 'aria-describedby' attribute on their .field-entry container.";
    }

    /* WARN: form elements with aria-describedby must have field-comment instances */
    .field-entry:not(:is(.checkbox-group, .radio-group)):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: "1️⃣♿️⚠️ Usage of aria-describedby on form elements requires at least 1 .field-comment instance as reference point.";
    }
    
    .field-entry:is(.checkbox-group, .radio-group):not(:has(.field-comment))[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: "1️⃣♿️⚠️ Usage of aria-describedby on the .field-entry of a checkbox/radio group requires at least 1 .field-comment instance as reference point.";
    }

    /* WARN: If a field entry has multiple comments, its form element must point to multiple IDs in aria-describedby */
    .field-entry:not(:is(.checkbox-group, .radio-group)):has(.field-comment + .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: "1️⃣♿️⚠️ If there are multiple .field-comment instances, they all must be referred to with the aria-describedby attribute of the form element.";
    }
    
    .field-entry:is(.checkbox-group, .radio-group):has(.field-comment + .field-comment):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: "1️⃣♿️⚠️ If there are multiple .field-comment instances, they all must be referred to with the aria-describedby attribute of the .field-entry wrapper.";
    }
    
    /* WARN: comment references on .field-entry are only allowed for radio and checkbox groups */
    .field-entry:not(:is(.checkbox-group, .radio-group))[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: "1️⃣♿️⚠️ A .field-entry has to be .radio-group or .checkbox-group to be allowed to carry the attribute 'aria-describedby' (referencing .field-comment instances).";
    }
    


    /* !--- COMPONENT: Form components - Labels */
    /* 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: "1️⃣🛑 <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: "1️⃣🛑 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, abbr, em, .substance-placeholder, .substance-id, .substance-timestamp)) {
        outline: var(--drei-mark-eins-warn) !important;
        --3️⃣-debug-tip: "1️⃣⚠️ 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: "1️⃣⚠️ A .substance-timestamp component must use the <time> HTML tag with a datetime attribute.";
    }
    
    .substance-timestamp[datetime*="/"], 
    .substance-timestamp[datetime*=" "] {
        outline: var(--drei-mark-eins-warn) !important;
        --3️⃣-source: "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/time#attributes";
        --3️⃣-debug-tip: "1️⃣⚠️ Typical formatting of the 'datetime' attribute on .substance-timestamp should not contain space or slash characters.";
    }
    
    
    /* !--- COMPONENT: Flyouts */
    /* WARN: incomplete flyout containers */
    .substance-flyout:not(:has(.flyout-controller)) {
        outline: var(--drei-mark-eins-warn) !important;
        --3️⃣-debug-tip: "1️⃣⚠️ A .substance-flyout container must contain a .flyout-controller.";
    }

    /* WARN: unwired flyout components */
    .flyout-controller:not(.substance-flyout .flyout-controller), 
    .flyout-host:not(.substance-flyout .flyout-host):not(.host-detached) {
        outline: var(--drei-mark-eins-warn) !important;
        --3️⃣-debug-tip: "1️⃣⚠️ .flyout-controller and .flyout-host must be children of a .substance-flyout container. Exception is .flyout-host.host-detached.";
    }

    /* TEST NEUTRALIZATION: Flyout hosts may use aria-labelledby as <div> */
    div.flyout-host[aria-labelledby] {
        outline: none !important;
        --3️⃣-debug-tip: unset;
    }


    /* !--- COMPONENT: Toolchains */
    /* CRISIS: toolchains must never be nested */
    .substance-toolchain .toolchain-link > .substance-toolchain {
        outline: var(--drei-mark-eins-crisis) !important;
        --3️⃣-debug-tip: "1️⃣🛑 Toolchain constructs must never be nested.";
    }


    /* !--- 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: "1️⃣🛑 Large .actor constructs must never be nested.";
    }
}


/* -------------------------------------------- */
/* !DREI EXTENSION: 🏠 Codebox Transity */

/* Current scope of this package: 

:: 🏠🛑 7 violations 
:: 🏠⚠️ 25 warnings
*/
/* -------------------------------------------- */

.tt-drei {
    /* !--- Expose version numbers of test modules */
    --drei-📅-application: "111b";
}


/* !-------------------------------------------- */
/* !DREI product test module: 🏠 Codebox Transity
:: Misconfigured EINS custom UI constructs */
/* !-------------------------------------------- */

#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-toolchain.toolchain-entity .substance-entity, .substance-editor, .substance-timestamp, #actor_incident .history-list .substance-richtext, .substance-filter .criterion-value) {
        outline: var(--drei-mark-app-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.";
    }
    
    /* WARN: icon-only .substance-entity always needs a title attribute */
    .substance-entity.entity-icon:not([title]) {
        outline: var(--drei-mark-app-warn) !important;
        --3️⃣-debug-tip: "🏠⚠️ When displaying a .substance-entity only as an icon, it must have a 'title' attribute explaining its content.";
    }
    
    /* TEST NEUTRALIZATION: In certain contexts we allow <abbr> without a title attribute */
    #actor_incident .substance-entity.entity-opinion[title] abbr, 
    #actor_creator .block-controller h3 abbr.id-suffix.suffix-point {
        outline: none !important;
        --3️⃣-debug-tip: unset;
    }
    
    /* TEST NEUTRALIZATION: Icon markers for opinions may have their own title */
    #actor_incident .substance-entity.entity-opinion[title]:has(abbr) {
        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:not([alt]), img[title=""], img:not([title])) {
        outline: none !important;
        --3️⃣-debug-tip: unset;
    }
    
    /* TEST NEUTRALIZATION: Nested titles are allowed if it's only a placeholder within a ListView link */
    .substance-table td .link-action[title] > .substance-placeholder[title] {
        outline: none !important;
        --3️⃣-debug-tip: unset;
    }

    /* TEST NEUTRALIZATION: Transity prototype may use empty title/alt attributes */
    *[title=""]:is(html[data-product] *[title=""]), 
    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-app-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;
        }
    }
    
    /* TEST NEUTRALIZATION: Transity prototype may use dirty links */
    a:not([href]):is(html[data-product] a), 
    a[href=""]:is(html[data-product] a) {
        outline: none !important;
        --3️⃣-debug-tip: unset;
    }

    
    /* !--- COMPONENT: Expander actions */
    /* CRISIS: .view-action.action-expand is deprecated */
    .view-action.action-expand {
        outline: var(--drei-mark-app-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-app-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;
    }
    */


    /* !--- 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;
    }
    
    /* TEST NEUTRALIZATION: wrappers for honeypot/helper inputs don't need a label */
    .field-container:not(:has(> label)):has(input:not(:is([aria-label], [aria-labelledby]))[aria-hidden="true"][tabindex="-1"]) {
        outline: none !important;
        --3️⃣-debug-tip: unset;
    }

    /* TEST NEUTRALIZATION: we allow singular checkboxes/radios in a group if it has a title */
    .field-entry:is(.checkbox-group, .radio-group):not(:has(.field-container + .field-container)):has(.field-title) {
        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-app-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, .richtext-filelist .primary-action))) {
        outline: var(--drei-mark-app-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-app-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-app-warn);
        --3️⃣-debug-tip: "🏠⚠️ A table should always have 1 column which serves as the active sorting marker.";
    }

    /* WARN: For the moment restricted to Admin: all big tables should have a .col-main */
    .rms-admin #actor_list .substance-table tbody tr:not(:has(td.col-main)) td {
        outline: var(--drei-mark-app-warn) !important;
        --3️⃣-debug-tip: "🏠⚠️ All big tables (within #actor_list) should have one column where all <td> have .col-main. This will become important for a11y.";
    }

    /* WARN: don't use multiple .col-main within the same table row */
    .substance-table td.col-main ~ td.col-main {
        outline: var(--drei-mark-app-warn) !important;
        --3️⃣-debug-tip: "🏠⚠️ Within a table row we should only declare one single <td> as .col-main.";
    }

    /* WARN: when using a big entity icon in a table, its cell must be the main column */
    .substance-table td:not(.col-main):has(.substance-entity:is(.entity-incident, .entity-guarantee, .entity-complaint, .entity-opinion, .entity-report, .entity-admin)) {
        outline: var(--drei-mark-app-warn) !important;
        --3️⃣-debug-tip: "🏠⚠️ When using one of our main entity icons, the wrapper <td> should have the class .col-main. Otherwise we'll get undesired linebreaks for longer strings";
    }
    

    /* !--- 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) */
    /* WARN: Richtext editors must be embbeded in marked .field-entry instance */
    .substance-richtext-editor:not(.field-entry.entry-richtext .substance-richtext-editor) {
        outline: var(--drei-mark-app-warn) !important;
        --3️⃣-debug-tip: "🏠⚠️ Instances of .substance-richtext-editor must be hosted in a .field-entry.entry-richtext wrapper. Without the .entry-richtext class some important width adjustments and a11y tests will fail.";
    }

    /* TEST NEUTRALIZATION: Richtext editors may contain an unlinked <label> */
    .substance-richtext-editor ~ :is(label:not([for]), label[for=""]) {
        outline: none !important;
        --3️⃣-debug-tip: "♿️⏳ Problem temporarily accepted (integration issue with 3rd-party module)";
    }
    
    /* TEST NEUTRALIZATION: Richtext editors may contain unlinked .field-comment instances */
    .field-entry.entry-richtext:has(.field-comment) textarea:not([aria-describedby]) {
        outline: none !important;
        --3️⃣-debug-tip: "1️⃣♿️⚠️ Problem temporarily accepted (integration issue with 3rd-party module)";
    }

    
    /* !--- COMPONENT: Entities */
    /* WARN: entities should always have text content */
    .substance-entity:empty {
        outline: var(--drei-mark-app-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: deadlines with state need a title attribute */
    .substance-timestamp.timestamp-deadline:is(.timestamp-due, .timestamp-overdue):not([title]) {
        outline: var(--drei-mark-app-warn) !important;
        --3️⃣-debug-tip: "🏠⚠️ A .substance-timestamp component must have a 'title' attribute spelling out its content if it represents a due/overdue deadline";
    }
    
    /* WARN: only span children inside a timestamp */
    time.substance-timestamp:has(> *:not(span)) {
        outline: var(--drei-mark-app-warn) !important;
        --3️⃣-debug-tip: "🏠⚠️ A .substance-timestamp must only contain <span> children.";
    }
    
    
    /* !--- COMPONENT: Counter */
    
    
    /* !--- COMPONENT: Messages & notifications */
    .substance-message:empty,
    .substance-message .substance-richtext:empty {
        outline: var(--drei-mark-app-crisis) !important;
        --3️⃣-debug-tip: "🏠🛑 A .substance-message must always contain text content.";
    }
    
    
    /* !--- 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: "♿️⏳ Problem temporarily accepted (integration issue with 3rd-party module)";
    }
    
    
    /* !--- COMPONENT: Structured text (from Markdown sources) */
    /* TEST NEUTRALIZATION: Some Richtext instances may contain empty paragraphs since they could come from foreign sources */
    .substance-richtext.richtext-foreign p:empty {
        outline: none !important;
        --3️⃣-debug-tip: "🌐⏳ Problem temporarily accepted (user-generated content)";
    }
    
    
    /* !--- COMPONENT: Route table */
    /* TEST NEUTRALIZATION: Route tables may contain emtpty <li> since they're acting as table cells. They are removed from the a11y tree. */
    .substance-route li:empty {
        outline: none !important;
        --3️⃣-debug-tip: unset;
    }
    
    /* TEST NEUTRALIZATION: pseudo table cells still use aria-label as abstract string containers */
    .substance-route li[aria-label] {
        outline: none !important;
        --3️⃣-debug-tip: "🌐⏳ Problem temporarily accepted (see TB-1561)";
    }
}


/* !-------------------------------------------- */
/* !DREI product test module: 🏠 Codebox Transity
:: Misconfigured Transity actors */
/* !-------------------------------------------- */

#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-app-crisis);
        --3️⃣-debug-tip: "🏠🛑 An #actor_incident without a sidebar (#actor_list.expression-compact) must still have an #actor_listcontrol.expression-compact.";
    }
    
    /* TEST NEUTRALIZATION: ObjectViews can throw errors */
    &.stage-objectview #ensemble_main:has(#actor_error:only-child) {
        outline: none !important;
        --3️⃣-debug-tip: unset;
    }
    
    
    /* !--- ACTOR: navigation */
    /* TEST NEUTRALIZATION: Product flyout container may still contain illegal <h1> <div> nesting */
    #actor_navigation h1 :is(p, ul, ol, div) {
        outline: none !important;
        --3️⃣-debug-tip: "🌐⏳ Problem temporarily accepted (TB-1466)";
    }


    /* !--- ACTOR: Incident data / major blocks */
    /* CRISIS: Incident actor must only be used within an appropriate stage */
    &.stage-listview #actor_incident {
        outline: var(--drei-mark-app-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-app-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-app-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-app-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-app-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-app-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-app-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-app-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-app-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-app-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-app-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.";
    }
    
    /* TEST NEUTRALIZATION: Point directory of complaint summary blocks may be a bit dirty regarding .col-main usage */
    #actor_incident .block-directory .substance-table td:not(.col-main):has(.substance-entity.entity-opinion) {
        outline: none !important;
        --3️⃣-debug-tip: "♿️⏳ Problem temporarily accepted (TB-1565)";
    }

    /* !--- 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-app-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-app-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-app-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;
    }
    
    /* Special selector to catch Integration systems where .tt-drei is directly attached to #actor_creator */
    /* TEST NEUTRALIZATION: Creator block sub-expanders (route table filtering) currently use dirty ARIA group construction/labels */
    .creator-form .fieldlist-segment.segment-optional .field-entry[aria-labelledby], 
    #actor_creator .fieldlist-segment.segment-optional .field-entry[aria-labelledby] {
        outline: none !important;
        --3️⃣-debug-tip: "♿️⏳ Problem temporarily accepted (TE-7028)";
    }
}