/* #region Root Styles */

:root {
    --style-background-primary-dark: rgb(20, 20, 21);
    --style-background-secondary-dark: rgb(23, 23, 24);
    --style-background-tertiary-dark: rgb(28, 28, 29);
    --style-background-quarternary-dark: rgb(32, 32, 33);
    --style-background-quinary-dark: rgb(39, 39, 39);
    --style-background-timeline-alternate-dark: rgb(25, 25, 26);

    --style-background-primary-light: rgb(216, 216, 218);
    --style-background-secondary-light: rgb(224, 223, 225);
    --style-background-tertiary-light: rgb(231, 231, 233);
    --style-background-quarternary-light: rgb(242,242, 244);
    --style-background-quinary-light: rgb(253,253,255);
    --style-background-timeline-alternate-light: rgb(231, 231, 232);

    --style-background-accent-ultrathin-dark: rgba(120, 120, 120, 0.06);
    --style-background-accent-thin-dark: rgba(120, 120, 120, 0.12);
    --style-background-accent-regular-dark: rgba(120, 120, 120, 0.26);
    --style-background-accent-selected-dark: rgba(132, 132, 132, 0.26);
    --style-background-accent-thick-dark: rgba(150, 150, 150, 0.45);
    --style-background-accent-ultrathick-dark: rgba(220, 220, 220, 0.45);
    --style-background-alternate-dark: rgba(120, 120, 120, 0.12);

    --style-background-accent-ultrathin-light: rgba(173, 173, 173, 0.06);
    --style-background-accent-thin-light: rgba(135, 135, 135, 0.12);
    --style-background-accent-regular-light: rgba(135, 135, 135, 0.18);
    --style-background-accent-selected-light: rgba(123, 123, 123, 0.24);
    --style-background-accent-thick-light: rgba(105, 105, 105, 0.36);
    --style-background-accent-ultrathick-light: rgba(35, 35, 35, 0.44);
    --style-background-alternate-light: rgba(135, 135, 135, 0.12);

    --style-background-accent-control-dark: rgba(50, 50, 50, 0.7);
    --style-background-accent-control-light: rgba(205, 205, 205, 0.7);
    
    --style-text-ultra-dark: rgb(255,255,255);
    --style-text-ultra-light: rgb(255, 255, 255);
    --style-text-primary-dark: rgb(229, 229, 238);
    --style-text-primary-light: rgb(39, 39, 40);
    --style-text-secondary-dark: rgb(185, 185, 189);
    --style-text-secondary-light: rgb(69, 69, 70);
    --style-text-tertiary-dark: rgb(134, 134, 138);
    --style-text-tertiary-light: rgb(98, 98, 100);
    --style-text-quarternary-dark: rgb(108, 108, 112);
    --style-text-quarternary-light: rgb(108, 108, 112);

    --color-accent-dark: rgb(57, 111, 161);
    --color-accent-light: rgb(57, 111, 161);
    --color-accent-hover-dark: rgb(89, 154, 215);
    --color-accent-hover-light: rgb(69, 119, 167);
    --color-accent-selection-dark: rgb(59, 112, 161);
    --color-accent-selection-light: rgb(59, 112, 161);
    --color-accent-thin-dark: rgba(89, 154, 215, 0.3);
    --color-accent-thin-light: rgba(77, 120, 160, 0.3);
    --color-accent-text-dark: #fff;
    --color-accent-text-light: #ebebeb;
    --color-timeline-selection-dark: rgba(59, 112, 161, 0.322);
    --color-timeline-selection-light: rgba(196, 143, 94, 0.322);
    --alert-warning-primary-dark: rgb(179, 135, 33);
    --alert-warning-primary-light: rgb(211, 134, 0);
    --alert-warning-secondary-dark: rgb(63, 50, 20);
    --alert-warning-secondary-light: rgb(209, 160, 96);
    

    --alert-error-primary-dark: rgb(179, 33, 33);
    --alert-error-secondary-dark: rgb(63, 20, 20);
    --alert-error-primary-light: rgb(179, 33, 33);
    --alert-error-secondary-light: rgb(63, 20, 20);

    --alert-info-border-color-dark: rgb(50, 122, 177);
    --alert-info-border-color-light: rgb(50, 122, 177);
    --alert-info-background-color-dark: rgb(26, 58, 84);
    --alert-info-background-color-light: rgb(107, 179, 234);

    --alert-success-border-color-dark: rgb(33, 179, 74);
    --alert-success-border-color-light: rgb(53, 123, 70);
    --alert-success-background-color-dark: rgb(47, 97, 61);
    --alert-success-background-color-light: rgb(33, 179, 74);

    --style-dialog-backdrop-light: rgba(129, 129, 129, 0.5);
    --style-dialog-backdrop-dark: rgba(19, 19, 19, 0.8);
    --style-role-destructive-background-dark: rgb(163, 37, 51);
    --style-role-destructive-background-dark-hover: rgb(207, 53, 71);
    --style-role-destructive-background-light: rgb(163, 37, 51);
    --style-role-destructive-background-light-hover: rgb(207, 53, 71);
    --style-role-destructive-accent-dark: #fff;

    --color-nationalRail-red: rgb(230,0,0);
    --color-nationalRail-white: #fff;

    --date-picker-month-cell: 38px;

    --color-delay-high-border-dark: rgba(193, 13, 22);
    --color-delay-high-background-dark: rgb(106, 25, 29);
    --color-delay-medium-border-dark: rgb(223, 87, 29);
    --color-delay-medium-background-dark: rgb(113, 54, 17);
    --color-delay-low-border-dark: rgb(199, 145, 19);
    --color-delay-low-background-dark: rgb(126, 87, 18);
    --color-delay-tiny-border-dark: rgba(199, 175, 19, 0.5);
    --color-delay-tiny-background-dark: rgba(126, 104, 18, 0.5);

    --color-delay-high-border-light: rgb(130, 5, 11);
    --color-delay-high-background-light: rgb(232, 80, 87);
    --color-delay-medium-border-light: rgb(130, 48, 13);
    --color-delay-medium-background-light: rgb(224, 139, 86);
    --color-delay-low-border-light: rgb(137, 100, 12);
    --color-delay-low-background-light: rgb(223, 169, 75);
    --color-delay-tiny-border-light: rgba(117, 104, 20, 0.5);
    --color-delay-tiny-background-light: rgba(190, 159, 32, 0.5);

    --platform-label-background-dark: #CFA314;
    --platform-label-background-light: #FCD043;
}

body.dark-mode {
    --style-background-primary: var(--style-background-primary-dark);
    --style-background-secondary: var(--style-background-secondary-dark);
    --style-background-tertiary: var(--style-background-tertiary-dark);
    --style-background-quarternary: var(--style-background-quarternary-dark);
    --style-background-quinary: var(--style-background-quinary-dark);
    --style-background-timeline-alternate: var(--style-background-timeline-alternate-dark);
    --style-background-accent-ultrathin: var(--style-background-accent-ultrathin-dark);
    --style-background-accent-thin: var(--style-background-accent-thin-dark);
    --style-background-accent-regular: var(--style-background-accent-regular-dark);
    --style-background-accent-selected: var(--style-background-accent-selected-dark);
    --style-background-accent-thick: var(--style-background-accent-thick-dark);
    --style-background-accent-ultrathick: var(--style-background-accent-ultrathick-dark);
    --style-background-accent-control: var(--style-background-accent-control-dark);
    --style-background-alternate: var(--style-background-alternate-dark);
    --style-text-ultra: var(--style-text-ultra-dark);
    --style-text-primary: var(--style-text-primary-dark);
    --style-text-secondary: var(--style-text-secondary-dark);
    --style-text-tertiary: var(--style-text-tertiary-dark);
    --style-text-quarternary: var(--style-text-quarternary-dark);
    --color-accent: var(--color-accent-dark);
    --color-accent-hover: var(--color-accent-hover-dark);
    --color-accent-selection: var(--color-accent-selection-dark);
    --color-accent-thin: var(--color-accent-thin-dark);
    --color-accent-text: var(--color-accent-text-dark);
    --color-timeline-selection: var(--color-timeline-selection-dark);
    --alert-warning-primary: var(--alert-warning-primary-dark);
    --alert-warning-secondary: var(--alert-warning-secondary-dark);
    --alert-error-primary: var(--alert-error-primary-dark);
    --alert-error-secondary: var(--alert-error-secondary-dark);
    --alert-info-border-color: var(--alert-info-border-color-dark);
    --alert-info-background-color: var(--alert-info-background-color-dark);
    --alert-success-border-color: var(--alert-success-border-color-dark);
    --alert-success-background-color: var(--alert-success-background-color-dark);
    --style-dialog-backdrop: var(--style-dialog-backdrop-dark);
    --style-role-destructive-background: var(--style-role-destructive-background-dark);
    --style-role-destructive-background-hover: var(--style-role-destructive-background-dark-hover);

    --color-delay-high-border: var(--color-delay-high-border-dark);
    --color-delay-high-background: var(--color-delay-high-background-dark);
    --color-delay-medium-border: var(--color-delay-medium-border-dark);
    --color-delay-medium-background: var(--color-delay-medium-background-dark);
    --color-delay-low-border: var(--color-delay-low-border-dark);
    --color-delay-low-background: var(--color-delay-low-background-dark);
    --color-delay-tiny-border: var(--color-delay-tiny-border-dark);
    --color-delay-tiny-background: var(--color-delay-tiny-background-dark);

    --inactive-filter: brightness(0.5);
    --active-filter: brightness(1.2) saturate(1.5);
    --map-line-dim: rgb(51, 51, 51);
    --map-line: rgb(88, 164, 232);
    --map-line-outer: rgb(60, 117, 167);
    /* #region Dark Map Colours */
    --map-background: #0D0D0D;
    --location-outline-fill: #59477A;
    --primary-location-text-fill: #FFFFFF;
    --primary-location-text-stroke: #17181B;
    --secondary-location-text-fill: #AAAAAA;
    --secondary-location-text-stroke: #17181B;
    --tertiary-location-text-fill: #AAAAAA;
    --tertiary-location-text-stroke: #17181B;
    --track-stroke-upper: #6685A9;
    --track-stroke-lower: #273F5B;

    --line-code-text-fill: #c1cfdf;
    --line-code-text-stroke: #192128;

    --direction-arrow-fill: #192128;
    --direction-arrow-stroke: #1A3049;
    --direction-text-fill: #9EB4CD;
    --direction-text-stroke: #1A2128;
    --through-line-label-fill: #969696;
    --through-line-label-stroke: #252525;
    --through-line-track-stroke-upper: #969696;
    --through-line-track-stroke-lower: #181818;
    --siding-label-fill: #9D7859;
    --siding-label-stroke: #251F1B;
    --siding-track-stroke-upper: #9D7859;
    --siding-track-stroke-lower: #40362E;

    --platform-fill: #2E415A;
    --platform-stroke: #5C779C;
    --platform-label-background: var(--platform-label-background-dark);
    --platform-label-text-fill: #252010;
    /* Dark Muted Theme */
    --muted-map-background: #0D0D0D;
    --muted-location-outline-fill: #2B213E;
    --muted-primary-location-text-fill: #1C1C1C;
    --muted-primary-location-text-stroke: #090909;
    --muted-secondary-location-text-fill: #1C1C1C;
    --muted-secondary-location-text-stroke: #090909;
    --muted-tertiary-location-text-fill: #1C1C1C;
    --muted-tertiary-location-text-stroke: #090909;
    --muted-track-stroke-upper: #1C2126;
    --muted-track-stroke-lower: #121517;
    --muted-line-code-text-fill: #343b41;
    --muted-line-code-text-stroke: #0f151a;

    --muted-direction-arrow-fill: #263744;
    --muted-direction-arrow-stroke: #0A1218;
    --muted-direction-text-fill: #263744;
    --muted-direction-text-stroke: #0A1218;
    --muted-through-line-label-fill: #263744;
    --muted-through-line-label-stroke: #0A1218;
    --muted-through-line-track-stroke-upper: #263744;
    --muted-through-line-track-stroke-lower: #0A1218;
    --muted-siding-label-fill: #22282D;
    --muted-siding-label-stroke: #0A1218;
    --muted-siding-track-stroke-upper: #263744;
    --muted-siding-track-stroke-lower: #0A1218;
    --muted-platform-fill: #1E2023;
    --muted-platform-stroke: #272B32;
    --muted-platform-label-background: #272B32;
    --muted-platform-label-text-fill: #6B6A66;
    /* #endregion */
}


body.light-mode {
    --style-background-primary: var(--style-background-primary-light);
    --style-background-secondary: var(--style-background-secondary-light);
    --style-background-tertiary: var(--style-background-tertiary-light);
    --style-background-quarternary: var(--style-background-quarternary-light);
    --style-background-quinary: var(--style-background-quinary-light);
    --style-background-timeline-alternate: var(--style-background-timeline-alternate-light);
    --style-background-accent-ultrathin: var(--style-background-accent-ultrathin-light);
    --style-background-accent-thin: var(--style-background-accent-thin-light);
    --style-background-accent-regular: var(--style-background-accent-regular-light);
    --style-background-accent-selected: var(--style-background-accent-selected-light);
    --style-background-accent-thick: var(--style-background-accent-thick-light);
    --style-background-accent-ultrathick: var(--style-background-accent-ultrathick-light);
    --style-background-accent-control: var(--style-background-accent-control-light);
    --style-background-alternate: var(--style-background-alternate-light);
    --style-text-ultra: var(--style-text-ultra-light);
    --style-text-primary: var(--style-text-primary-light);
    --style-text-secondary: var(--style-text-secondary-light);
    --style-text-tertiary: var(--style-text-tertiary-light);
    --style-text-quarternary: var(--style-text-quarternary-light);
    --color-accent: var(--color-accent-light);
    --color-accent-hover: var(--color-accent-hover-light);
    --color-accent-selection: var(--color-accent-selection-light);
    --color-accent-thin: var(--color-accent-thin-light);
    --color-accent-text: var(--color-accent-text-light);
    --color-timeline-selection: var(--color-timeline-selection-light);
    --alert-warning-primary: var(--alert-warning-primary-light);
    --alert-warning-secondary: var(--alert-warning-secondary-light);
    --alert-error-primary: var(--alert-error-primary-light);
    --alert-error-secondary: var(--alert-error-secondary-light);
    --alert-info-border-color: var(--alert-info-border-color-light);
    --alert-info-background-color: var(--alert-info-background-color-light);
    --alert-success-border-color: var(--alert-success-border-color-light);
    --alert-success-background-color: var(--alert-success-background-color-light);
    --style-dialog-backdrop: var(--style-dialog-backdrop-light);
    --style-role-destructive-background: var(--style-role-destructive-background-light);
    --style-role-destructive-background-hover: var(--style-role-destructive-background-light-hover);

    --color-delay-high-border: var(--color-delay-high-border-light);
    --color-delay-high-background: var(--color-delay-high-background-light);
    --color-delay-medium-border: var(--color-delay-medium-border-light);
    --color-delay-medium-background: var(--color-delay-medium-background-light);
    --color-delay-low-border: var(--color-delay-low-border-light);
    --color-delay-low-background: var(--color-delay-low-background-light);
    --color-delay-tiny-border: var(--color-delay-tiny-border-light);
    --color-delay-tiny-background: var(--color-delay-tiny-background-light);

    --inactive-filter: brightness(1.5);
    --active-filter: brightness(0.8) saturate(1.5);
    --map-line-dim: rgb(204, 204, 204);
    --map-line: rgb(117, 191, 255);
    --map-line-outer: rgb(99, 159, 212);
    /* #region Light Map Colours */
    /* --map-background: #eaece1; */
    --map-background: #dbdbdb;
    --location-outline-fill: #A179A9;
    --primary-location-text-fill: #41424d;
    --primary-location-text-stroke: #FFFFFF;
    --secondary-location-text-fill: #5A5C6B;
    --secondary-location-text-stroke: #FFFFFF;
    --tertiary-location-text-fill: #5A5C6B;
    --tertiary-location-text-stroke: #FFFFFF;
    --track-stroke-upper: #416B9C;
    --track-stroke-lower: #a7c7ed;
    --line-code-text-fill: #254D71;
    --line-code-text-stroke: #CEDEF0;
    --direction-arrow-fill: #CEDEF0;
    --direction-arrow-stroke: #254D71;
    --direction-text-fill: #CEDEF0;
    --direction-text-stroke: #254D71;
    --through-line-label-fill: #707070;
    --through-line-label-stroke: #cdcdcd;
    --through-line-track-stroke-upper: #cdcdcd;
    --through-line-track-stroke-lower: #808080;
    --siding-label-fill: #CAA586;
    --siding-label-stroke: #674D38;
    --siding-track-stroke-upper: #C79E7E;
    --siding-track-stroke-lower: #5a402b;
    --platform-fill: #7a98bf;
    --platform-stroke: #7a98bf;
    --platform-label-background: var(--platform-label-background-dark);
    --platform-label-text-fill: #4D3D07;
    /* muted light */
    --muted-map-background: #F4F4F0;
    --muted-location-outline-fill: #948897;
    --muted-primary-location-text-fill: #ABABAB;
    --muted-primary-location-text-stroke: #F5F6F2;
    --muted-secondary-location-text-fill: #ABABAB;
    --muted-secondary-location-text-stroke: #F5F6F2;
    --muted-tertiary-location-text-fill: #ABABAB;
    --muted-tertiary-location-text-stroke: #F5F6F2;
    --muted-track-stroke-upper: #ABABAB;
    --muted-track-stroke-lower: #CECECE;
    --muted-line-code-text-fill: #909090;
    --muted-line-code-text-stroke: #C8C8C8;
    --muted-direction-arrow-fill: #909090;
    --muted-direction-arrow-stroke: #C8C8C8;
    --muted-direction-text-fill: #909090;
    --muted-direction-text-stroke: #C8C8C8;
    --muted-through-line-label-fill: #909090;
    --muted-through-line-label-stroke: #C8C8C8;
    --muted-through-line-track-stroke-upper: #909090;
    --muted-through-line-track-stroke-lower: #C8C8C8;
    --muted-siding-label-fill: #909090;
    --muted-siding-label-stroke: #C8C8C8;
    --muted-siding-track-stroke-upper: #909090;
    --muted-siding-track-stroke-lower: #C8C8C8;
    --muted-platform-fill: #ABABAB;
    --muted-platform-stroke: #CECECE;
    --muted-platform-label-background: #CECECE;
    --muted-platform-label-text-fill: #777671;
    /* #endregion */

    
}


:root, * {
    --color-loading-medium: rgba(172, 116, 11);
    --color-loading-medium-border: rgba(172, 116, 11, 0.5);
    --color-loading-medium-background: rgba(145, 97, 9, 0.5);

    --color-loading-high: rgba(193, 13, 22);
    --color-loading-high-border: rgba(193, 13, 22, 0.5);
    --color-loading-high-background: rgba(180, 18, 26, 0.5);



    --style-border-radius: 4px;
    --style-border-radius-tiny: calc(4px + var(--style-padding-tiny));
    --style-border-radius-small: calc(4px + var(--style-padding-small));
    --style-padding-tiny: 4px;
    --style-padding-table: 6px;
    --style-padding-small: 8px;
    --style-padding-medium: 12px;
    --style-padding-large: 18px;
    --style-padding-xlarge: 24px;
    --style-padding-xxlarge: 36px;
    --style-padding-xxxlarge: 48px;

    --style-label-height: 24px;
    --style-input-height: 32px;


    --icon-size-tiny: 16px;
    --icon-size-small: 20px;
    --icon-size-regular: 24px;
    --icon-size-large: 30px;
    --icon-size-xlarge: 36px;
    --icon-size-xxlarge: 54px;
    --icon-size-xxxlarge: 72px;
    --icon-overlap: -0.35;
    --font-size-title-large: 48px;
    --font-size-title: 32px;
    --font-size-title2: 24px;
    --font-size-title3: 18px;
    --font-size-subtitle: 15px;
    --font-size-subheading: 14px;
    --font-size-heading: 12px;
    --font-size-body: 12px;
    --font-size-paragraph: 12px;
    --font-size-small: 11px;
    --font-size-tiny: 9px;
    --font-default: 'InterDisplay', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-mono: "IBM Plex Mono", system-ui;
    --font-emoji: "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Segoe UI", "Android Emoji","Twemoji Mozilla","Noto Color Emoji",;
    --anim-duration-ultrashort: 80ms;
    --anim-duration-short: 120ms;
    --anim-duration-medium: 240ms;
    --anim-duration-long: 480ms;

    --popover-shadow: rgba(0, 0, 0, 0.12) 0px 3px 32px, rgba(0, 0, 0, 0.1) 0px 4px 24px, rgba(0, 0, 0, 0.08) 0px 3px 10px, rgba(0, 0, 0, 0.06) 0px 2px 6px, rgba(0, 0, 0, 0.1) 0px 1px 2px;

    --date-picker-size: 28px;

    --anim-bounce: cubic-bezier(0.5, 0.05, 1, 0.5);

    --border-regular: 1px solid var(--style-background-accent-regular);
    --mud-palette-text-secondary: var(--style-text-secondary);
    --mud-palette-text-primary: var(--style-text-primary);
    --mud-palette-surface: var(--style-background-primary);
    --mud-palette-action-default-hover: rgba(255, 255, 255, 0.058823529411764705);
    --mud-palette-primary: var(--style-background-accent-regular);
    --mud-palette-action-disabled: rgba(255, 255, 255, 0.25882352941176473);
    --mud-palette-action-default: rgba(255, 255, 255, 0.5372549019607843);

    --schedule-list-row-height: 40px;

    --train-graph-y-axis-width: 160px;

    --font-largeTitle: 400 var(--font-size-title2) var(--font-default);
    --font-title: 400 var(--font-size-title3) var(--font-default);
    --font-subtitle: 400 var(--font-size-subtitle) var(--font-default);
    --font-headline: 400 var(--font-size-heading) var(--font-default);

    --map-select: rgb(174, 15, 31);
    --map-select-outer: rgb(216, 21, 21);

    --timeline-capsule-border-width: 1px;
}

/* #endregion */

:root {
    --editor-row-height: 32px;
    --editor-text-input-height: 24px;
}

.script-editor-body {
    overflow-y: scroll;
    min-height: 100%;
    padding: var(--style-padding-xxxlarge) var(--style-padding-medium);
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    gap: var(--style-padding-medium);
    height: 100%;
    flex-grow: 1;
}
.script-editor .script-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--style-padding-large);
    max-width: 960px;
    width: 100%;
}

.tt-script-container {
        display: block;
        height: 100%;
        max-height: 100%;
        overflow: hidden;
    }

@scope (.script-editor) to ([popover], [dialog]) {

    

    /* #region TT Editing Script List (Capsules and Detail) ✓ */
    
    .tt-script-capsule-list,
    .tt-script-detail-step-list {
        display: flex;
        flex-direction: column;
        min-height: 100%;
        max-height: 100vh;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .tt-script-capsule-list {
        max-width: 360px;
        padding: var(--style-padding-small);
        border-right: var(--border-regular);
    }
    .tt-script-detail-step-list {
        flex-grow: 1;
        padding: var(--style-padding-medium);
    }
    
    
    @scope (.tt-script-capsule-list) to ([popover],[dialog]) {
        .ttsl-items-list {
            display: flex;
            flex-direction: column;
            gap: 0;
        }

        .tt-script-capsule {
            background-color: var(--style-background-accent-ultrathin);
            border:  1px solid var(--style-background-accent-regular);
            border-radius: var(--style-border-radius);
            padding: var(--style-padding-small);
            overflow: clip;
            transition-property: background-color, border-color;
            transition-duration: var(--anim-duration-ultrashort);
            box-shadow: 
            rgba(0, 0, 0, 0.05) 0px 3px 8px,
            rgba(0, 0, 0, 0.05) 0px 2px 4px,
            rgba(0, 0, 0, 0.05) 0px 2px 12px;
        }

        .tt-script-capsule > .header {
            display:flex;
        }

        .tt-script-capsule.selected,
        .tt-script-capsule:hover:not(.selected) {
            background-color: var(--style-background-accent-thin);
            border-color: var(--style-background-accent-thick);
        }
        .tt-script-capsule.selected:hover {
            background-color: var(--style-background-accent-regular);
            border-color: var(--style-background-accent-thick);
        }

        .tt-script-list-join,
        .tt-script-list-end {
            padding: var(--style-padding-small) 0;
            display: flex;
            justify-content: center;
            position: relative;
        }
        .tt-script-list-join::before,
        .tt-script-list-join::after {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            left: 50%;
            width: 1px;
            height: var(--style-padding-small);
            background-color: var(--style-background-accent-thick);
        }
        .tt-script-list-join::after {
            top: unset;
            bottom: 0;
        }
    }

    @scope (.tt-script-detail-step-list) to ([popover],[dialog]) {
        input {
            background-color: transparent;
            border: none;
            outline: none;
            color: var(--style-text-primary);
        }
        .tt-script-detail-capsule {
            background-color: var(--style-background-accent-ultrathin);
            border:  1px solid var(--style-background-accent-regular);
            border-radius: var(--style-border-radius-tiny);
            padding: var(--style-padding-medium);
            overflow: clip;
            transition-property: background-color, border-color, outline-color;
            transition-duration: var(--anim-duration-ultrashort);
            box-shadow: 
            rgba(0, 0, 0, 0.05) 0px 3px 8px,
            rgba(0, 0, 0, 0.05) 0px 2px 4px,
            rgba(0, 0, 0, 0.05) 0px 2px 12px;

            display: flex;
            flex-direction: column;
            outline: 2px solid transparent;
            min-width: 600px;/*dp - the placeholders weren't showing when collapsed */
        }
        .tt-script-detail-capsule:focus {
            outline-color: var(--color-accent-selection);
            outline-offset: 1px;
        }
        .tt-script-detail-capsule header input[type=text],
        .tt-script-detail-capsule .desc.section input[type=text] {
            width: 100%;
        }

        .tt-script-detail-capsule header.section {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
            gap: var(--style-padding-small);
        }
        .tt-script-detail-capsule > *:nth-child(2) {
            margin-top: var(--style-padding-small);
        }
        .tt-script-detail-capsule header.section > div {
            display: flex;
            align-items: center;
        }
        .tt-script-detail-capsule header.section .ico {
            width: 16px;
        }
        .tt-script-detail-capsule header.section .title {
            flex-grow: 1;
        }
        .tt-script-detail-capsule header.section .title input[type=text] {
            font-size: var(--font-size-subheading);

        }

        .tt-script-detail-capsule .section:not(:first-of-type)::before {
            content: '';
            display: block;
            width: 100%;
            height: 1px;
            background-color: var(--style-background-accent-regular);
            margin: var(--style-padding-small) 0;
            
        }

        .tt-script-detail-join {
            height: 24px;
            display: flex;
            position: relative;
            overflow: clip;
        }
        .tt-script-detail-join::after {
            content: '';
            display: block;
            position: absolute;
            width: 2px;
            height: 100%;
            top: 0;
            left: 50%;
            background-color: var(--style-background-accent-regular);
            box-shadow: 
            rgba(0, 0, 0, 0.05) 0px 3px 8px,
            rgba(0, 0, 0, 0.05) 0px 2px 4px,
            rgba(0, 0, 0, 0.05) 0px 2px 12px;
        }
    }

    /* #endregion */




    /* #region TT Editing Section */

    .script-content input[type="text"],
    .script-content input.text {
        border: none;
        outline: none;
        border-radius: 0;
        padding: 0;
        height: var(--editor-text-input-height);
        font-weight: 500;
        font-size: 13px;
    }

    button,
    button:hover,
    button:focus {
        background-color: transparent;
        color: var(--style-text-secondary);
        outline: none;
    }

    .edtr-template-section {
        display: flex;
        flex-direction: column;
        line-height: 1;
        flex-grow: 1;
        width: 100%;
    }
    .edtr-template-section > header {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: var(--style-padding-small);
        gap: var(--style-padding-small);
        background-color: var(--style-background-accent-regular);
        border-top-right-radius: var(--style-border-radius-tiny);
        border-top-left-radius: var(--style-border-radius-tiny);
    }
    .edtr-template-section.collapse > header {
        border-bottom-right-radius: var(--style-border-radius-tiny);
        border-bottom-left-radius: var(--style-border-radius-tiny);
    }
    
    .edtr-template-section > .content {
        border: 1.5px solid var(--style-background-accent-regular);
        border-top: none;
        border-bottom-right-radius: var(--style-border-radius-tiny);
        border-bottom-left-radius: var(--style-border-radius-tiny);
    }
    .edtr-template-section > header > * {
        display: flex;
        flex-shrink: 1;
    }
    .edtr-template-section > header > .lead {
        flex-grow: 1;
        flex-shrink: 0;
    }
    .edtr-template-section > header > .lead input {
        width: 100%;
    }


    /* #endregion */

    /* #region UNknown */

    .edtr-rte-sec {
        padding: var(--style-padding-xlarge);
        display: flex;
        flex-direction: column;
        gap: var(--style-padding-small);
        width: 900px;
        
    }
    .edtr-rte-sec-reorder {
        display: flex;
        flex-direction: column;
        gap: var(--style-padding-small);
    }

    .edtr-rte-sec-row {
        height: auto;
        display: flex;
        position: relative;
        flex-direction: column;
        gap: var(--style-padding-small);
    }
    .edtr-rte-sec-row.anim-grow {
        transition-property: height;
        transition-duration: var(--anim-duration-medium);
        height: calc-size(auto);

        @starting-style {
            height: 0px;
        }
    }

    .edtr-rte-sec-row .drag-handle {
        position: absolute;
        height: var(--editor-row-height);
        width: 16px;
        right: 100%;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: move;
        z-index: 100;
    }
    .edtr-rte-sec-row .drag-handle * {
        cursor: move;
    }
    .edtr-rte-sec-row .edtr-row-drag-handle * {
        cursor: move;
    }
    .edtr-rte-sec-row .edtr-row-drag-handle svg {
        color: var(--style-background-accent-thick);
    }

    .edtr-rte-sec-row .edtr-row-children:empty {
        display: none;
    }
    .edtr-rte-sec-row .edtr-row-children {
        display: flex;
        flex-direction: column;
        gap: var(--style-padding-small);
        padding-left: 32px;
        position: relative;
    }
    .edtr-rte-sec-row .edtr-row-children::before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        bottom: -24px;
        left: 15px;
        width: 2px;
        z-index: 2;
        border-radius: 2px;
        background-color: var(--style-text-quarternary);
    }

    /* .edtr-rte-sec-row.header {
        text-align: center;
    } */

    .edtr-row-timing {
        display: grid;
        align-items: center;
        gap: 0 var(--style-padding-small);
        flex-grow: 1;
        background-color: var(--style-background-quarternary);
        border-radius: var(--style-border-radius);
        height: var(--editor-row-height);
    }
    .edtr-row-timing:focus {
        outline: 1.5px solid var(--color-accent-hover);
    }
    .edtr-row-timing:focus:not(:focus-visible) {
        outline: none;
    }
    .edtr-row-timing input {
        font-size: var(--font-size-small) !important;
    }
    .edtr-row-timing input.duration {
        width: 100%;
        height: var(--editor-text-input-height);
        color: var(--style-text-primary);
        border-radius: var(--style-border-radius);
        background-color: var(--style-background-accent-thin);
        border: 1px dashed var(--style-background-accent-thick);
        text-align: center;
    }
    .edtr-row-timing .edtr-cell.loc,
    .edtr-row-timing .edtr-cell.desc {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: var(--style-padding-tiny);
    }
    .edtr-row-timing .edtr-cell.loc .ico {
        width: 32px;
        height: auto;
        display: flex;
    }
    .edtr-row-timing .edtr-cell.desc {
        padding-left: var(--style-padding-small);
        gap: var(--style-padding-small);
    }
    .edtr-row-timing .edtr-cell.desc .ico {
        width: 16px;
    }
    .edtr-row-timing .edtr-cell.icon,
    .edtr-row-timing .edtr-cell.pfm,
    .edtr-row-timing .edtr-cell.lin,
    .edtr-row-timing .edtr-cell.dwel,
    .edtr-row-timing .edtr-cell.dur,
    .edtr-row-timing .edtr-cell.arr,
    .edtr-row-timing .edtr-cell.dep {
        justify-content: center;
        display: flex;
    }

    .edtr-row-timing .edtr-cell.pfm button,
    .edtr-row-timing .edtr-cell.lin button {
        display: flex;
        width: 100%;
        height: var(--editor-text-input-height);
        justify-content: center;
    }
    .edtr-row-timing .edtr-cell.pfm button > span,
    .edtr-row-timing .edtr-cell.lin button > span {
        font-weight: 600;
        justify-content: center;
    }
    .edtr-row-timing .edtr-cell.pfm button:has(> span:not(:empty)) {
        background-color: var(--platform-label-background-dark);
    }
    .edtr-row-timing .edtr-cell.pfm button:has(> span:not(:empty)) * {
        color: var(--platform-label-text-fill) !important;
        font-weight: 700;
    }
    .edtr-row-timing .edtr-cell.lin button:has(> span:not(:empty)) {
        background-color: var(--linecode-label-background-dark);
    }
    .edtr-row-timing .edtr-cell.pfm button:not(:has(> span:not(:empty))),
    .edtr-row-timing .edtr-cell.lin button:not(:has(> span:not(:empty))) {
        background-color: var(--style-background-accent-thin);
        border: 1px dashed var(--style-background-accent-thick);
    }

    

    .edtr-rte-sec-route-ico {
        width: var(--editor-row-height);
        height: var(--editor-row-height);
        position: relative;
    }
    .edtr-rte-sec-route-ico::before,
    .edtr-rte-sec-route-ico::after {
        content: '';
        position: absolute;
        display: block;
        pointer-events: none;
    }
    .edtr-rte-sec-route-ico::before {
        
        width: 8px;
        height: 8px;
        top: calc(50% - 4px);
        left: calc(50% - 4px);
        background-color: var(--style-text-primary);
        border-radius: 2px;
        z-index: 3;
        transition: var(--anim-duration-short);
    }
    .edtr-rte-sec-route-ico.stop::before {
        transform: scale(1);
    }
    .edtr-rte-sec-route-ico.pass::before {
        transform: scale(0);
    }
    .edtr-rte-sec-route-ico::after {
        top: calc(50% - 2px);
        left: calc(15px);
        width: 2px;
        height: calc(var(--editor-row-height) + var(--style-padding-small) + 4px);
        background-color: var(--style-text-quarternary);
        z-index: 2;
        border-radius: 2px;
    }
    .edtr-rte-sec-row.timing-point:last-of-type .edtr-rte-sec-route-ico::after {
        display: none;
    }
    /* .edtr-rte-sec-reorder:has(.sortable-drag) .edtr-rte-sec-route-ico::after {
        display: none;
    } */

    .edtr-rte-sec-route-ico button.toggle {
        width: var(--editor-row-height);
        height: var(--editor-row-height);
        position: relative;
    }

    /* #endregion */


    /* #region TT Route Table */

    table.rte-editor-table {
        min-width: 100%;
    }

    .anim-stop-ico .bell,
    .anim-stop-ico .move {
        transition: var(--anim-duration-long);
    }
    .anim-stop-ico.pass .bell {
        opacity: 0;
    }

    @scope (table.rte-editor-table) to ([popover], [dialog]) {
        
        /* button, button:hover, button:focus {
            background-color: transparent !important;
            border: none;
            outline: none;
            margin: 0;
            padding: 0;
        } */

        td, th {
            text-align: left;
            height: var(--editor-row-height) !important;
            max-height: var(--editor-row-height) !important;
            vertical-align: middle;
        }

        tbody tr:not(:last-of-type) td:not(.rte, .ico) {
            border-bottom: var(--border-regular);
        }
        thead th:not(.rte, .ico),
        tbody tr:not(:last-of-type) td:not(.rte, .ico) {
            padding-right: var(--style-padding-small);
            padding-left: var(--style-padding-small);
        }

        td.rte, th.rte {
            width: var(--editor-row-height);
            min-width: var(--editor-row-height);
            line-height: 0;
        }
        td.ico, th.ico {
            display: flex;
            align-items: center;
            padding-right: var(--style-padding-small);
            padding-left: 16px ;
        }

        td.prop, th.prop {
            width: 100%;
        }

        td.plat, th.plat,
        td.line, th.line {
            text-align: center;
        }
        td.dwell, th.dwell,
        td.dur, th.dur {
            text-align: right;
        }
        input.duration {
            text-wrap: nowrap;
            white-space: nowrap;
            width: 72px;
            text-align: right;
        }

        td.arr, th.arr,
        td.dep, th.dep {
            text-align: center;
        }

        

        button.edit-stop,
        button.edit-stop svg {
            width: var(--editor-row-height);
            height: var(--editor-row-height);
            background-color: transparent !important;
        }

        

    }


    /* #endregion */
}