.ott-insp-new {
    transition-property: opacity;
    transition-delay: var(--anim-duration-short);
    transition-duration: var(--anim-duration-medium);
    opacity: 1;
    @starting-style {
        opacity: 0;
    }
}

/* #region Branded Inspector Section */

.ins-brand-header {
    display: flex;
    flex-direction: column;
    gap: var(--style-padding-large);
    padding: var(--style-padding-large);
}
.ins-brand-header:has( .veh) {
    padding-bottom: 0;
}
.ins-brand-header .veh {
    margin-top: var(--style-padding-medium);
}

/* #endregion */

/* #region Generic Property Grid For Inspector */

.gen-prop-grid-wrap {
    display: contents;
}
@scope (.gen-prop-grid-wrap) to ([popover], [dialog]) {
    .gen-property-grid {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: var(--style-padding-small);
            padding-top: var(--style-padding-large);
            border-top: var(--border-regular);
        }
    .gen-property-grid > * {
        background-color: rgba(19, 19, 19, 0.1);
        padding: var(--style-padding-tiny) var(--style-padding-small);
        border-radius: var(--style-border-radius);
        display: flex;
        flex-grow: 0;
        flex-shrink: 1;
    }
    .gen-property-grid * {
        color: inherit;
    }
}

/* #endregion */

/* #region Generic OD Header Inspector */

.gen-od-head-wrap {
    display: contents;
}

@scope (.gen-od-head-wrap) to ([popover], [dialog]) {
    .gen-od-head {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto;
        gap: 0 var(--style-padding-medium);
        align-items: center;
        max-width: 100%;
        
    }
    .gen-od-head .brnd {
        grid-column: 1;
        grid-row: span 2;
    }
    .gen-od-head .from, 
    .gen-od-head .to {
        grid-column: 2;
        overflow: hidden;
    }
    .gen-od-head h3, 
    .gen-od-head h3 * {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
    .gen-od-head .trainid, 
    .gen-od-head .days {
        grid-column: 3;
        justify-items: end;
    }
    .gen-od-head .from, 
    .gen-od-head  .trainid {
        grid-row: 1;
    }
    .gen-od-head .to, 
    .gen-od-head .days {
        grid-row: 2;
    }
    .gen-od-head a {
        display: contents;
    }
    .gen-od-head a:hover * {
        text-decoration: underline;
    }
    .gen-od-head .veh {
        padding-top: var(--style-padding-medium);
    }
}


/* #endregion */


@scope (.ott-insp-new) to ([popover], [dialog]) 
{

    .ott-insp-sect-group {
        display: contents;
    }

    header.ott-insp-head.sticky {
        position: sticky;
        top: 0;
        z-index: 2;
        backdrop-filter: blur(8px);
        border-bottom: var(--border-regular);
    }

    header.ott-insp-head.sticky .ott-insp-sect {
        background-color: var(--color-back-6);
        color: var(--color-text-2);
    }
    
    .ott-insp-body {
        z-index: 1;
        position: relative;
    }

    .ott-insp-sect.pad-all {
        padding: var(--style-padding-large);
    }

    .ott-insp-sect.pad-top {
        padding-top: var(--style-padding-large);
    }
    .ott-insp-sect.pad-bottom {
        padding-bottom: var(--style-padding-large);
    }
    .ott-insp-sect.pad-leading {
        padding-left: var(--style-padding-large);
    }
    .ott-insp-sect.pad-trailing {
        padding-right: var(--style-padding-large);
    }

    /* #region Inspector Section */

    .ott-insp-sect {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .ott-insp-body .ott-insp-sect:last-child {
        margin-bottom: var(--style-padding-xlarge);
    }

    .ott-insp-sect header {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
    }
    .ott-insp-sect .body:empty {
        display: none;
    }
    .ott-insp-sect:has(header) .body {
        margin-top: var(--style-padding-medium);
    }
    .ott-insp-sect:not(.pad-top) header {
        padding-top: var(--style-padding-large);
    }
    .ott-insp-sect:not(.pad-leading) header {
        padding-left: var(--style-padding-large);
    }
    .ott-insp-sect:not(.pad-trailing) header {
        padding-right: var(--style-padding-large);
    }

    .ott-insp-sect:not(.no-border, :first-child) {
        border-top: var(--border-regular);
    }
    .ott-insp-head .ott-insp-sect {
        border: none;
    }

    .ott-insp-sect.rail-map .body {
        border-radius: var(--style-border-radius);
        overflow: hidden;
        border: 1px solid var(--style-background-accent-thin);
    }

    .ott-insp-sect.train-grph .body {

    }

    /* #endregion */

    /* #region Inspector Table */
    table.instbl {
        width: 100%;
        min-width: 100%;
    }
    .instbl {
        text-wrap: nowrap;
        white-space: nowrap;
    }
    .instbl td,
    .instbl th {
        padding: var(--style-padding-small);
    }
    .instbl tr:not(:last-child) td,
    .instbl tr:not(:last-child) th {
        border-bottom: var(--border-regular);
    }
    .instbl td:first-child:nth-last-child(2),
    .instbl th:first-child:nth-last-child(2) {
        color: var(--color-text-5);
        padding-right: var(--style-padding-xxlarge);
        padding-left: 0;
    }
    .instbl td:last-child:nth-child(2),
    .instbl th:last-child:nth-child(2) {
        width: 100%;
        color: var(--color-text-2);
        padding-right: 0;
    }

    /* #endregion */




}



.ins-live-loc-status-wrap {

}

@scope (.ins-live-loc-status-wrap) to ([dialog], [popover]) {
    
    .ins-live-loc-status {
        border-top: 1px solid;
        border-bottom: 1px solid;
        padding: var(--style-padding-large);
        backdrop-filter: blur(24px);
    }

    .stat-grid {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        gap: 0 var(--style-padding-tiny);
    }
    .stat-grid .info {
        grid-row: 1;
        grid-column: 1;
    }
    .stat-grid .detail {
        grid-row: 2;
        grid-column: 1;
    }
    .stat-grid .plat {
        grid-row: 1 / span 2;
        grid-column: 2;
        align-self: center;
    }
    .body.on-time {
        background-color: color-mix(in srgb, var(--color-green) 30%, transparent);
        color: color-mix(in srgb, var(--color-green) 80%, transparent);
        border-color: color-mix(in srgb, var(--color-green) 80%, transparent);
    }
    .body.small-late {
        background-color: color-mix(in srgb, var(--color-orange) 30%, transparent);
        color: color-mix(in srgb, var(--color-orange) 80%, transparent);
        border-color: color-mix(in srgb, var(--color-orange) 80%, transparent);
    }
    .body.medium-late {
        background-color: color-mix(in srgb, var(--color-red) 30%, transparent);
        color: color-mix(in srgb, var(--color-red) 80%, transparent);
        border-color: color-mix(in srgb, var(--color-red) 80%, transparent);
    }
    .body.large-late {
        background-color: color-mix(in srgb, var(--color-purple) 30%, transparent);
        color: color-mix(in srgb, var(--color-purple) 80%, transparent);
        border-color: color-mix(in srgb, var(--color-purple) 80%, transparent);
    }
    

    .body .info *,
    .body .detail * {
        color:  inherit;
    }
    .body .plat {
        font-size: 14px;
        padding: 3px;
        min-width: 26px;
    }

    .body.on-time strong {
        color: var(--color-green);
    }
    .body.small-late strong {
        color: var(--color-orange);
    }
    .body.medium-late strong {
        color: var(--color-red);
    }
    .body.large-late strong {
        color: var(--color-purple);
    }

}